Question

我有一个关于.animate（）和.stop（）jQuery方法的问题，我希望有人可以帮忙解释一下。

我在我的网站上滚动顺畅，但是当我点击按钮向下滚动时出现问题，在我让它向上或向下滚动之前会有一个暂停，我无法正确地做到这一点远。我在.animate（）前添加了.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并将新的一个添加到队列中 - 如果您有多个排队的动画，这种区别很重要，但是你的情况只有一个动画，因为你在开始一个新的之前取消了前一个动画。所以：

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

永远不会滚动到1000，因为.stop会取消。

jQuery .animate（）导致暂停

1 个答案: