Question

我正在使用这个jquery尝试淡出我的图像并显示下面的内容。除非您将鼠标悬停在它上面，否则它的工作时间非常完美。然后它吓坏了，开始一次又一次地进出。我能做些什么吗？

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

Answer 1

是。在动画功能之前添加“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);
});

Answer 2

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

使用停止（）和淡出

stop（）用于停止当前动画。

fadeTo（）用法是因为当您在淡入淡出 / fadeOut 期间停止动画时，不透明度将不会重置为100％，并且你的形象会在一段时间内变得不可见。

Answer 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');
});

Jquery图像淡出

3 个答案: