ロールオーバーが複数回繰り返されるとスライダーが何度も何度も繰り返しています

私は次のコードを持っています:

$(document).ready(function() {
    $('#nav li').hover(

    function() {
       //Show the sub menu
        $('ul', this).slideDown(300);
    }, function() {
        //hide its submenu
        $('ul', this).slideUp(200);
    });

});

しかし、もし私がNavメニュー項目を素早くロールオーバーすると、50回言うと、ループのようにアニメーションを上下に50回表示し続けるでしょう!...

私は $( 'ul'、this).stop()。slideDown(300); のように .stop()を追加しようとしました。 ..どのようなアイデアをどこにコードや別の方法でそれを行うに入れてください?

0
4ヶ月、8つの質問、0%受け入れ、0%私のあなたの助けのチャンス
追加された 著者 Lightness Races in Orbit,
申し訳ありませんが、私はこの仕組みが分かりませんでした!私は行くし、今人々に感謝します!
追加された 著者 CodeyMonkey,

1 答え

停止のためのAPI では、一致した要素で現在実行中のアニメーションを停止するこれはあなたが必要とするものです。

下のスニペットでは、私は2つのパラメータも用意しています。これらは:

  • clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
  • jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.

通常、コードは次のようになります(自分のやり方)。

$(document).ready(function() {     
  $('#nav li').hover(function() {
   //Show the sub menu
    $('ul', this).stop(true,true).slideDown(300);
  }, 
  function() {
  //hide its submenu
    $('ul', this).stop(true,true).slideUp(200);         
  });
});

編集:

私はコードを更新し、true、trueの代わりにtrue、falseを使用するように設定して、メニューを意図したとおりに動作させます。ただし、2番目のパラメータはアニメーションを強制的に終了させるため、ちょっと不気味です。

1
追加された
それをJSFiddleに投稿してください。私たちはそれを使って遊ぶことができます。
追加された 著者 Jan Højriis Dragsbaek,
アップデートをチェックする
追加された 著者 Jan Højriis Dragsbaek,
こんにちは、1月に返信ありがとう、最初のホバー後...サブ/ドロップメニューは表示されなくなりました
追加された 著者 CodeyMonkey,
ありがとうございましたJan、ここに行きました。それらを数回転がすと、ドロップが機能しなくなるのがわかります - jsfiddle。 net/MgrUJ
追加された 著者 CodeyMonkey,
それは私のことでいいですね、ちょっと...助けに時間をとってくれてありがとう、ありがとう。 :-)
追加された 著者 CodeyMonkey,