使用jQuery在向上和向下滚动时添加不同的CSS动画

Question

我正在尝试添加类，以便在用户向上和向下滚动时显示2个CSS动画。 如果我只使用向下滚动动画，它可以正常工作，但当我同时使用向上滚动和向下滚动动画时，它会变得不稳定。

我无法让动画连续多次触发。例如-向下滚动暂停，向下滚动暂停，向上滚动暂停，向上滚动暂停。

这里有一个jsFiddle更好地演示了问题： 这是jsFiddle链接

以下是代码-

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").removeClass("climb");
            $("#repel").addClass("repel").delay(1150).queue(function (next) {
                $(this).removeClass("repel");
                next();
            });
        } else {
            // upscroll code
            $("#repel").removeClass("repel");
            $("#repel").addClass("climb").delay(1000).queue(function (next) {
                $(this).removeClass("climb");
                next();
            });
        }
        previousScroll = currentScroll;
    });
}());

- apaul

---

我看了一下 jsFiddle，但是不太明白你所说的“让动画多次触发”的意思。我在 jsFiddle 中并没有看到任何动画？ - Jean-Paul

@Jean-Paul 抱歉我没有添加浏览器前缀，目前动画在FF中可见，我很快会添加-webkit-。 - apaul

好的，我会打开我的火狐浏览器。今晚稍后我会研究一下你的问题。 - Jean-Paul

Answer 1

我明白了...

我只需要改变动画被移除的方式。不再使用延迟和队列，而是检测动画结束并以此方式移除它。

工作示例

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").addClass("repel");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('repel');
            });

        } else {
            // upscroll code
            $("#repel").addClass("climb");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('climb');
            });
        }
        previousScroll = currentScroll;
    });
}());

- apaul