jQuery的停止fadeTo效果

Question

http://jsfiddle.net/sJFLq/1/

我想要的是一種的鼠標追蹤效果，當鼠標懸停向上或向下的div。但是，如果您將鼠標懸停幾次然後停止，則效果不斷重複。

我該如何解決這個問題？我想我需要某種類似於動畫選項的排隊功能，但對於fadeTo功能。有任何想法嗎？

Answer 1

可以使用.stop方法停止先前的喧鬧。如果您通過true作爲參數，它也將清除排隊的動畫。

如果我明白你在找什麼東西，那麼你想要的是這個（你說你想要一個「鼠標線」，我想這意味着你不想讓以前的動畫只要鼠標離開該元素停止，因此只有一個調用.stop）：

$(".test").mouseover(function(e){ 
    $(this).stop(true).fadeTo(200,1); 
}).mouseout(function(e){ 
    $(this).fadeTo(200,0.3); 
}); 

你可以看到，運行here。

Answer 2

終止您以前的動畫添加.stop()：http://jsfiddle.net/sJFLq/5/

$(".test").mouseover(function(e){ 
    $(this).stop(true, true).fadeTo(200,1); 
}).mouseout(function(e){ 
    $(this).stop(true, true).fadeTo(200,0.3); 
}); 

Answer 3

完全按照您在您的標題形容它:)

$(".test").mouseover(function(e){ 
    $(this).stop().fadeTo(200,1); 
}).mouseout(function(e){ 
    $(this).stop().fadeTo(200,0.3); 
});