jQuery動畫重複故障

Question

我有一組輸入，我想在鼠標懸停後更改它們的背景顏色，然後在鼠標移出後再回到原始顏色。

它工作正常，有一個小故障。當我將鼠標懸停在這些輸入上時，快速移動，然後再次懸停，然後閃爍一段時間。我該如何解決它？

這裏是我的代碼：

$("input").hover(
    function(){ 
     $(this).animate({backgroundColor: '#fff'}, 800); 
}, function(){ 
     $(this).animate({backgroundColor: '#666'}, 1400); 
    }); 

（我不想改變動畫倍）

我已經找到了工作示例：

http://veerle.duoh.com/ - 檢查搜索輸入 - 當你懸停，然後將鼠標快速關閉 - 它不會完成動畫甚至眨眼。

Answer 1

喂，你必須使用stop()函數停止當前的動畫，否則jQuery將開始新的前完成動畫堆棧（在隊列中的所有其他動畫）...查看jQuery queue() function文檔，瞭解jQuery的FX作品...

$("input").hover(
    function(){ 
     $(this).stop().animate({backgroundColor: '#fff'}, 800); 
    }, function(){ 
     $(this).stop().animate({backgroundColor: '#666'}, 1400); 
    }); 

請參閱jQuery stop() function文檔編號：

Answer 2

以下是關於從動畫構建中停止jQuery的快速教程。我曾多次使用過這種技術。

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup