jquery - jquery animate() 帮助

Question

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

});

Answer 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