帮助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

Answer 2

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

$(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(); 

}); 

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