JQuery動畫排隊

我正在研究this website，並首次實現了JQuery的animate()（在導航上）。在瀏覽器中，我都能正常工作，但我注意到它似乎排列動畫。通過這個我的意思是，如果你快速地向前和向後輕擊鼠標，這些項目將繼續上下跳動，直到隊列爲空。JQuery動畫排隊

這裏是我的animate()東西：

$(document).ready(function() 
{ 
    // Navigation effects 
    $("table#cat_752586 td").mouseover(function() 
    { 
     $(this).animate({ 
      marginTop: "0px", 
      lineHeight: "60px" 
     }, 350); 
    }); 

    $("table#cat_752586 td").mouseout(function() 
    { 
     $(this).animate({ 
      marginTop: "20px", 
      lineHeight: "36px" 
     }, 350); 
    }); 
});

什麼是丟棄我的導航這一功能的最簡單的方法？

只是想的東西：靜止滾下動畫需要一個在你翻身的資產淨值瞬間滾落的情況下軋後排隊。

來源

2011-08-10 Marty

您之前.animate()

$(this).stop().animate({});

需要.stop()有2個參數.stop()根據需要，如果你希望動畫跳到結尾和/或清除隊列上配置，你可能方式。通常.stop(true)就足夠了。

編輯：有一個更清潔的組合鼠標懸停/鼠標的版本。

$("table#cat_752586 td").mouseover(function() { 
    $(this).stop(true).animate({ 
     marginTop: "0px", 
     lineHeight: "60px" 
    }, 350); 
}).mouseout(function() { 
    $(this).stop(true).animate({ 
     marginTop: "20px", 
     lineHeight: "36px" 
    }, 350); 
});

來源

2011-08-10 23:32:07 andyb

令人敬畏的編輯，我一直忘記你可以鏈接這樣的東西，我會盡量多使用它。 – Marty

替換：

$(this).animate(...)

與此：

$(this).stop().animate(...)

這將開始一個新的，有效的沖洗隊列之前停止所有正在運行的動畫。

請參閱the jQuery documentation。

來源

2011-08-10 23:33:14 RichieHindle

爲了滿足我在問題中添加註釋的要求（對不起），我只是在.animate（）的一個上實現了這個要求嗎？如果是這樣，哪一個？ – Marty

我想你總是希望'stop（）'。在你添加的問題中的含義是，即使我立即滾動，你也希望「開啓」動畫完成運行 - 我原以爲你會希望「關閉」動畫立即取代它。有關示例，請參閱http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup。 – RichieHindle

你是對的，在實現stop（）後，我認爲我對結果很滿意。 – Marty

JQuery動畫排隊

回答

相關問題