Jquery淡入循环停止，但在停止之前完成淡入不起作用。

Question

我已经循环使用了fadeIn/fadeOut。
当鼠标悬停时，我想要获得淡入-停止效果，然后在鼠标移出时重新启动动画。
无法理解:(

HTML:

<style>
div{
width:300px;
height:300px;
background-color:black;  
}​
</style>

<div>
</div>

这是 JavaScript 代码：

function fade(){
$('div').fadeIn(2000, function(){
   $('div').fadeOut(2000, fade());                           
    })
}

fade();

$('div').hover(function(){
    $('div').fadeIn({duration:100, queue:false}).stop(true, true);
},function(){
    fade();
});​

这是一个 JsFiddle 链接：
http://jsfiddle.net/5Zqcu/55/
谢谢您的帮助。

- Adam

---

你想在这里做什么还不清楚。 - Brian Noah

Answer 1

我已经修改了fiddle。

function fade(){
    $('div').fadeIn(2000, function(){
       $('div').fadeOut(2000, fade);                           
    })
}

fade();

$('div').hover(function(){
    $('div').stop(true);
},function(){
    fade();
});​

- Kaidul

---

“stop”不接受回调函数，在您的fiddle中它可以工作（停止动画做出意外的事情），因为它将回调函数评估为真值并清除事件队列。您可以简单地将其更改为“stop（true）”，同时不需要额外的hover out封闭。 - Stuart Wakefield

另外需要注意的是，淡入完成后才调用淡出函数，而不是在淡出完成后调用，因此会排队执行更多的动画。将.fadeOut(2000, fade())更改为.fadeOut(2000, fade)以纠正这个问题。 - Stuart Wakefield

Answer 2

在执行动画/淡入之前，您需要停止：

function fade(){
    $('div').fadeIn(2000, function(){ 
       $('div').fadeOut(2000, fade);                           
    })
}
fade();

$('div').hover(function(){
    $(this).stop().animate({opacity:1},100);
},function(){
    fade(); 
});​

- Rene Koch

Answer 3

看起来您想要一些脉动元素，它会在淡入淡出直到鼠标悬停在上面，然后它应该完全不透明。最好使用fadeTo，因为fadeIn和fadeOut通常将起始不透明度作为显示不透明度。

此外，您不需要使用回调对齐下一个动画，只需将它们连接起来即可，因为它们会自动排队到fx队列中。当您想要停止动画时，您将需要使用stop(true)，如果您使用stop()，它会停止当前动画并启动下一个动画。

function fade() {
    $("div").fadeTo(2000, 0).fadeTo(2000, 1, fade);
}

fade(); // Start throbbing

$("div").hover(function() {
    // You want to clear the queue but not call the complete callback
    // and then rapidly fade in
    $(this).stop(true).fadeTo(100, 1);
}, fade);

这是更新后的代码片段 http://jsfiddle.net/5Zqcu/66/

- Stuart Wakefield

Answer 4

同样的事情，超短版：

$('div').on('mouseenter').stop(true).fadeTo(100,1)
   ._.on('mouseleave').repeat().fadeTo(2000,0).fadeTo(2000,1,$)
   ._.mouseleave();

这个例子，http://jsfiddle.net/creativecouple/rLcqD/，使用了一个小的jquery-timing插件来实现简短的语法。

- peter