Jquery 图像淡出答案

【问题标题】：Jquery Image Fade OutJquery 图像淡出
【发布时间】：2011-08-16 03:33:26
【问题描述】：

我正在使用这个 jquery 来尝试淡出我的图像并显示下面的内容。它工作得很好，除非你将鼠标悬停在它上面多次。然后它吓坏了，开始一遍又一遍地进进出出。有什么我可以做的吗？

$('#contentPosters li').hover(function(){
    $(this).find('img').fadeOut();
}, 
function(){
    $(this).find('img').fadeIn();
});

【问题讨论】：

标签： jquery hover

【解决方案1】：

$('#contentPosters li').hover(function(){
    $(this).find('img').stop().fadeTo('fast',0);
}, 
function(){
    $(this).find('img').stop().fadeTo('fast',1);
});

使用 stop() 和 fadeTo

stop() 用于停止当前动画。

fadeTo() 使用是因为当你在 fadeIn / fadeOut 期间停止动画时，不透明度不会重置为 100%，并且随着时间的推移，您的图像将变得不可见。

【讨论】：

这似乎有效，只是它下面的元素不起作用。我无法点击链接。
fadeTo 不会完全隐藏元素。使用此更新jsfiddle.net/wSYmg/1
是的，那是我的错，以为没关系，但我想我错了。无论哪种方式，感谢您的帮助。顺便说一句，快与慢之间有什么区别吗？

【解决方案2】：

是的。在动画函数之前添加“stop()”。

$('#contentPosters li').hover(function(){
    $(this).find('img').stop().fadeOut();
}, 
function(){
    $(this).find('img').stop().fadeIn();
});

以上在技术上可以工作，但我认为更好的工作方式是。

var delay = 200;
$('#contentPosters li').hover(function(){
    $(this).find('img').dequeue().fadeTo(delay,0);
}, 
function(){
    $(this).find('img').dequeue().fadeTo(delay,1);
});

【讨论】：

这似乎可以工作，除了某些原因，现在有时当我的鼠标消失时，它不会再次显示 img。
@Jacinto 对，用户在发布代码之前没有检查功能。
hmmmm....Jo 我尝试了您的新代码，但它并没有淡出到 iamge。 @Avetarman 他做错了什么？
对不起，我的第二行是fadeTo而不是fadeIn...更新了代码
@Jo 为什么做得更好？同样这样做会导致与下面相同的问题，我有一个不再可点击的链接。

【解决方案3】：

~~尝试使用 .fadeToggle('fast')，它涵盖了所有问题。~~

看起来 stop() 不适用于默认的 .fadeToggle，因为它会在不透明度进行到一半时停止动画。

$('#contentPosters li').hover(function(e) {
    $(this).find('img').stop().fadeTo(200,'mouseleave'==e.type)
});

~~http://jsfiddle.net/rkw79/w2vus/~~

编辑：新的小提琴现在可以使用

最新更新：这是最干净的解决方案

http://jsfiddle.net/rkw79/xBtpC/

$('#contentPosters li').hover(function(e) {
  $(this).find('img').stop(true,true).fadeToggle('fast');
});

【讨论】：

不，它没有“涵盖所有捕获”。
@avetarman，哇，你说得对。队列变得混乱。我一直认为 .toggle 功能天生就可以处理这些问题。