帮助jQuery animate()

我正在使用此代码来更改用户打开和关闭图片时的不透明度,不幸的是,当用户单击图像时,不透明度不会保持为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});
  });

});
最佳答案
用户单击时,需要以某种方式禁用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");
    });
});

编辑:

如果您想再次单击以将行为恢复为原始状态,请使用toggleClass()而不是addClass():

        $(this).toggleClass("active");

jQuery文档:

> .hasClass()-http://api.jquery.com/hasClass
> .addClass()-http://api.jquery.com/addClass
> .toggleClass()-http://api.jquery.com/toggleClass

相关文章

1.第一步 设置响应头 header('Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...