jQueryのアニメーションの蓄積を停止するにはどうすればよいですか？

Question

私はサイドメニューを開くための次のスクリプトを持っています。 メニューが1行ずつ開きます。 しかし、メニューボタンをすばやくクリックすると、アニメーションが形成されます。 これをどうやって止めることができますか？以前は.stop（true）と.finish（）で試してみましたが、目的の効果は得られませんでした。私はおそらく何か間違っているので、私はjQueryを初めて使っています。

 var s = 0; 
     var navMenu = document.getElementById("nav_menu"); 
     var navBtn = document.getElementById("btn"); 
     var speed = 100; 

      function menuOpen() { 
       if (s==0){ 

        $("#nav_menu").scrollTop(0); 
        navBtn.classList.add('close'); 
        navMenu.style.zIndex = "4"; 
        navMenu.style.overflowY = 'auto'; 

        $('ul').each(function() { 
         $(this).children().each(function(i) { 
          $(this).delay(i * speed).animate({ 
           left: 0 
          }); 
         }); 
        }); 

        s++; 

        $("li").promise().done(function() { 
         navMenu.style.zIndex = "4"; 
         navMenu.style.overflowY = 'auto'; 
        }); 

       } else { 

        navBtn.classList.remove('close'); 


        $('ul').each(function() { 
         $(this).children().each(function(i) { 
          $(this).delay(i * speed).animate({ 
           left: "100%" 
          }); 

         }); 
        }); 

        s=0; 

        $("li").promise().done(function() { 
         navMenu.style.zIndex = "0"; 
         navMenu.style.overflowY = 'hidden'; 
        }); 


       }; 

      }; 

可能であれば、回答を説明してください。 ありがとう

Answer 1

はい、アニメーションはjQueryのstop()メソッドで停止する必要があります。コードを確認してください。最初stop()を呼び出す必要があり、その後、高速応答のためのanimate()

$(this).stop().animate({left: 0},i * speed); 

$(this).stop().animate({left: "100%"},i * speed);