jquery - Jquery fadeIn 循环停止，但在停止不工作之前完成淡入

Question

我已经循环淡入/淡出。
在悬停时，我想获得淡入->停止效果，然后在鼠标移出时重新启动动画。
想不通:(

html:

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

<div>
</div>

这是js代码：

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/

谢谢您的帮助

Answer 1

我修改了小提琴

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

fade();

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

Answer 2

你需要在做动画/淡入之前停下来：

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

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

Answer 3

似乎你想要某种脉冲元素，它会淡入淡出，直到你将鼠标悬停在它上面，然后它应该变得完全不透明。你最好使用fadeToasfadeIn并且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/

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来实现简短的语法。