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");
    });
});

< strong>编辑：

如果您希望第二次单击将行为恢复为原始状态，请使用toggleClass()而不是addClass()：

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

---

jQuery 文档：

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

Answer 2

您只需要跟踪它是否被点击即可。您可以通过几种方法来实现这一点，但由于您只有一个要跟踪的元素，因此变量是最简单的方法。我还优化了您的代码以利用链接。我还更改了您的选择器以提高效率。 #slide 比 img#slide 更好，因为 id 应该是唯一的：

$(document).ready(function(){
  var clicked = false;

  $('#slide')
    .animate({"opacity" : 0.7})
    .hover(function(){
      if(!clicked) {
        $(this).stop().animate({"opacity" : 1});
      }
    }, function(){
      if(!clicked){
        $(this).stop().animate({"opacity" : 0.7});
      }
    })
    .click(function(){
        clicked = true;
    });
});

Answer 3

该线程中的所有答案都很好，并且可行。但为此，这里有一种不同的方法。

根据您的代码和问题，您实际上正在做的是从元素中删除悬停行为。应该按如下方式完成：

$(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).unbind('hover');
  });
});

可以重构以允许以新颖的方式切换行为：

 $(document).ready(function(){

  var over = function(){
   $('img#slide').stop().animate({"opacity" : 1});
  };

  var out = function(){
   $('img#slide').stop().animate({"opacity" : 0.7});
  };

  var on = function(){
   $('img#slide').hover(over, out).one('click', off);
  }

  var off = function(){
   $('img#slide').unbind('hover').one('click', on);
  };

  $("img#slide").one('click', on);

  out.call();

 });

注意：我还没有测试过这个（我正在工作），但你明白了。