jQuery .animate（）によって一時停止が発生しました

Question

誰かが説明するのを助けてくれると期待していた.animate（）と.stop（）jQueryメソッドに関する質問があります。

私のウェブサイトでスムーズなスクロールができましたが、スクロールダウンするときにボタンをクリックしたときに問題が発生しました。スクロールしてすぐにスクロールして戻すことができます。 。私は.anate（）の前に.stop（）を追加して問題を完全に解決しました。私はボタンをクリックしてスクロールダウンしてからすぐに上下にスクロールすることができます。問題。

誰かがこれがなぜ私に説明されますか？

これは私のコードの例です：

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); 

は上にスクロール下にスクロールするために5Sを取り、その後、5Sます - 最初のための第二.animate待ち、すなわち。

これは、ボタンのクリックからアニメーションが呼び出されて完了していない、つまりクリックのアニメーションがキューに入れられている場合に顕著です。

あなたは.stop（https://api.jquery.com/stop/）を使用する場合、それは現在.animateをキューに入れられ、キューに新しいものを追加キャンセル - あなたが複数のアニメーション化をキューに入れられている場合は、この区別は重要ですが、キャンセルとして、あなたの場合には1つのアニメーションは今まであります新しいものを開始する前に前のものしたがって：

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

.stopによってキャンセルされるので、決して1000にスクロールしません。