如何停止速度动画重复答案

【问题标题】：How to stop velocity animation repeating itself如何停止速度动画重复
【发布时间】：2017-02-04 22:55:13
【问题描述】：

我正在使用速度为网站的滚动按钮设置动画。当窗口滚动时，按钮动画改变位置，当我们再次到达顶部时，它返回到原来的位置。代码如下：

$(document).ready(function() {
    var mustSlideRight = true;
    var mustSlideLeft = false;
    $(window).scroll(function() {

        var scrolledHeight = ($(window).scrollTop());

        if (scrolledHeight > 2 && mustSlideRight)  {

            $(".scrollButton")
                .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"})
                .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"})
                .velocity({left: "95%", backgroundPosition: "-50px"}, {duration: 1})
                .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"})
                .velocity({width: "50px", height: "50px"}, {duration: 150, easing: "ease-in-out"});
            mustSlideRight = false;
            mustSlideLeft = true;
        }
        else if (scrolledHeight < 10 && mustSlideLeft) {

            $(".scrollButton")
                .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"})
                .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"})
                .velocity({left: "49%", backgroundPosition: "0px"}, {duration: 1})
                .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"})
                .velocity({width: "50px", height: "50px"}, {duration: 150, easing: "ease-in-out"});
            mustSlideLeft = false;
            mustSlideRight = true;
        }
    });

按钮的背景图片是一个精灵。

问题是动画来回运行了很多次。往下跑3次，往上跑5-6次。我认为我编写代码的方式存在问题，在它的逻辑上，但我无法弄清楚。有什么想法吗？

编辑：

@mattmokary ：我按照你的建议做了，但事情变得更糟了，尽管我觉得这就是方法。但是，我几乎可以肯定我的代码中有错误。动画根本没有开始。

 var mustSlideRight = true;
    var mustSlideLeft = false;
    var animating = false;
    $(window).scroll(function() {

        if (animating){
            return;
        }else if (!animating){
            animating = true;
            var scrolledHeight = ($(window).scrollTop());

            if (scrolledHeight > 2 && mustSlideRight)  {

                $(".scrollButton")
                    .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"})
                    .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"})
                    .velocity({left: "95%", backgroundPosition: "-50px"}, {duration: 1})
                    .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"})
                    .velocity({width: "50px", height: "50px"}, {duration: 150, complete: function(){animating = false;}, easing: "ease-in-out"});
                mustSlideRight = false;
                mustSlideLeft = true;
            }
            else if (scrolledHeight < 10 && mustSlideLeft) {

                $(".scrollButton")
                    .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"})
                    .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"})
                    .velocity({left: "49%", backgroundPosition: "0px"}, {duration: 1})
                    .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"})
                    .velocity({width: "50px", height: "50px"}, {duration: 150, complete: function(){animating = false;}, easing: "ease-in-out"});
                mustSlideLeft = false;
                mustSlideRight = true;
            }
        }
    });

【问题讨论】：

你试过去抖动动画功能吗？

标签： javascript jquery css animation velocity.js

【解决方案1】：

当您向下滚动页面时，会触发许多 scroll 事件。这个函数被每个事件调用一次，动画排队。

要修复它，请添加一个标志，表示动画已经在运行，并且在该标志为 true 时不要再运行任何动画。比如：

var animating = false;

$(window).scroll(function () {
     if (animating) {
         return;
     }

     // ...
});

您还必须在执行动画时设置animating = true，并在设置animating = false 的动画完成后将回调传递给velocity 以运行。

【讨论】：

【解决方案2】：

嗯，这比我想象的要容易得多。我只是更改了 if 语句中的参数以仅将动画触发到非常特定的点，并且动画不会重复；）

if($(document).scrollTop() >= 3 && mustSlideRight) {
}else if ($(document).scrollTop() <=2 && mustSlideLeft){}

【讨论】：