어떻게 jQuery에서 애니메이션 생성을 멈출 수 있습니까?

Question

다음 스크립트를 사용하여 사이드 메뉴를 엽니 다. 메뉴가 한 줄씩 열립니다. 그러나 메뉴 버튼을 빠르게 누르면 애니메이션이 생성됩니다. 어떻게 이런 일이 일어나지 않게 할 수 있습니까? 전에 .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);