帮助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动画。

一种常见的方法是添加一个类，并对{1}}检查是否存在该类。

测试实例： http://jsfiddle.net/KnCmR/

mouseleave

修改

如果您希望第二次点击将行为还原为原始行为，请使用$(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()

---

jQuery docs：

• $(this).toggleClass("active"); - http://api.jquery.com/hasClass
• .hasClass() - http://api.jquery.com/addClass
• .addClass() - 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();

 });

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