我正在使用此代码来更改用户打开和关闭图片时的不透明度,不幸的是,当用户单击图像时,不透明度不会保持为1.有人回答吗?
$(document).ready(function(){
$('img#slide').animate({"opacity" : .7})
$('img#slide').hover(function(){
$(this).stop().animate({"opacity" : 1})
},function(){
$(this).stop().animate({"opacity" : .7})
});
$('img#slide').click(function(){
$(this).animate({"opacity" : 1});
});
});
@H_404_8@
最佳答案
用户单击时,需要以某种方式禁用mouseleave动画.
一种常见的方法是添加一个类,并让mouseleave检查该类的存在.
测试实时示例:http://jsfiddle.net/KnCmR/
$(document).ready(function () { $('img#slide').animate({ "opacity": .7 }) .hover(function () { $(this).stop().animate({ "opacity": 1 }) },function () { if ( !$(this).hasClass("active") ) { $(this).stop().animate({ "opacity": .7 }); } }) .click(function () { $(this).addClass("active"); }); });
@H_404_8@编辑:
如果您想再次单击以将行为恢复为原始状态,请使用toggleClass()而不是addClass():
$(this).toggleClass("active");
@H_404_8@jQuery文档:
> .hasClass()-http://api.jquery.com/hasClass
> .addClass()-http://api.jquery.com/addClass
> .toggleClass()-http://api.jquery.com/toggleClass