jquery fadeIn循環停止，但在停止不工作之前完成褪色

Question

我已經循環fadeIn/fadeOut。
在懸停我想要淡入淡出 - >停止效果，並重新啓動動畫在鼠標出。
不能弄明白:(

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

u需要停止之前做動畫/淡入：

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

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

Answer 2

我已經修改了fiddle

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

fade(); 

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

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/

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/，採用了短語法有點plugin jquery-timing。