jQuery .animate()가 일시 중지되었습니다.

Question

.animate() 및 .stop() jQuery 메서드에 대한 질문이 있습니다. 누군가가 설명 할 수 있기를 바랬습니다.

나는 내 웹 사이트에서 부드러운 스크롤을했지만 아래로 스크롤하기 위해 단추를 클릭 할 때 문제가 발생했다. 다시 위 또는 아래로 스크롤 할 수있게되기 전에 일시 중지가 발생했다. 즉시 해결할 수 없었다. . .stop()을 .animate() 앞에 추가하면 문제가 완전히 수정되었습니다. 버튼을 클릭하여 아래로 스크롤 한 다음 아무런 일시 중지없이 바로 위 또는 아래로 스크롤 할 수 있으며, 왜 이렇게 해결되었는지는 분명하지 않습니다. 문제.

누군가이 사실을 설명해 줄 수 있습니까?

var windowWidth = $(window).width(); 
if(windowWidth > 800) { 
    $(function() { 
     $("a[href*='#'][href!='#']").click(function() { 
      $('.nav-dropdown').hide(); 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        $('html,body').stop().animate({ 
         scrollTop: target.offset().top 
        }, 500); 
        return false; 
       } 
      } 
     }); 
    }); 
} 

var jump=function(e) { 
    if (e){ 
     e.preventDefault(); 
     var target = $(this).attr("href"); 
    } else{ 
     var target = location.hash; 
    } 

    $('html,body').stop().animate({ 
     scrollTop: $(target).offset().top 
    }, 500, function(){ 
     location.hash = target; 
    }); 
} 

Answer 1

이를 입증하는 가장 쉬운 방법은 500에서 5000에, 더 이상 뭔가 예를 들어, 당신의 애니메이션 시간을 변경하는 것입니다

이

내 코드의 예입니다.

.animate()으로 전화를하면 대기열에 추가되고 해당 대기열이 완료되면 계속 진행됩니다. 예 :

$("div").animate({scrollTop:1000}, 5000).animate({scrollTop:0}, 5000); 

는 위로 스크롤 한 후 5 초를 아래로 스크롤 5 초를 취할 것 - 최초의 초 .animate 대기 즉.

이것은 애니메이션이 버튼 클릭에서 호출되어 완료되지 않은 경우 (예 : 클릭 애니메이션을 대기열에 넣음)에 눈에 띄게 나타납니다.

당신은이 (가) 현재 .animate을 대기 취소하고 큐에 새 하나가 추가 .stop (https://api.jquery.com/stop/)를 사용하는 경우 - 여러 애니메이션이 대기중인 경우이 구분이 중요하지만, 당신이 취소 귀하의 경우에는 오직 하나의 애니메이션있다 새로운 하나를 시작하기 전에 이전 하나. 따라서 :

$("div").animate({scrollTop:1000}, 5000) 
     .stop() 
     .animate({scrollTop:0}, 5000); 

은 .stop에 의해 취소되므로 절대로 1000으로 스크롤하지 않습니다.