JQueryのアニメーションキューイング

Question

私はthis websiteで作業しており、初めてJQueryのanimate()（ナビゲーション上）を実装しました。私が持っているブラウザではうまく動作していますが、アニメーションがキューに入れられているようです。これはつまり、マウスを前後にフリックさせてナビゲーションをすばやく進めると、アイテムはキューが空になるまで上下にジャンプし続けます。

ここに私の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); 
    }); 
}); 

私のナビゲーションから、この機能を破棄する最も簡単な方法は何が？

---

はちょうど何かを考えた：ロールオフのアニメーションは、まだあなたがNAVロールオーバーと瞬時にロールオフの場合、上の圧延のための1つの後にキューイングする必要があります。 .animate()

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

前にあなたが.stop()に必要

Answer 1

.stop()はあなたがアニメーションが最後にジャンプおよび/またはキューをクリアしたい場合に応じて設定するための方法を5月かかる2つのパラメータがあります。通常で十分です。

編集：クリーンな組み合わせのマウスオーバー/マウス出力バージョンがあります。

$("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); 
}); 

Answer 2

置き換えます。これで

$(this).animate(...) 

：キューをフラッシュする、効果的な新しいものを開始する前に、実行中のアニメーションを停止します

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

。

the jQuery documentationを参照してください。