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

Question

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

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

按钮的背景图像是精灵。

问题是动画来回运行了很多次。向下运行三次，向上运行 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事件。此函数针对每个事件调用一次，动画将排队。

要修复此问题，请添加一个标志，表示动画已在运行，并且在该标志true时不要再运行任何动画。像这样：

var animating = false;
$(window).scroll(function () {
     if (animating) {
         return;
     }
     // ...
});

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

Answer 2

嗯，

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

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