如何停止速度动画重复自身

Question

我正在使用速度为网站的滚动按钮制作动画。当 window 滚动时，按钮动画改变位置，当我们再次到达顶部时，它 returns 在它原来的位置。这是代码：

$(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;
            }
        }
    });

Answer 1

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

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

var animating = false;

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

     // ...
});

您还必须在执行动画时设置 animating = true，并在设置 animating = false.[=15 的动画完成后将速度回调传递给运行 =]

Answer 2

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

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

如何停止速度动画重复自身

How to stop velocity animation repeating itself

javascript

jquery

css

animation

velocity.js