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

Posted 2023-03-06

【中文标题】使用 jQuery 在向上滚动和向下滚动时添加不同的 CSS 动画

【英文标题】：Adding different CSS animations on scroll up and scroll down with jQuery

【发布时间】：2013-04-21 20:11:12

【问题描述】：

我试图在用户上下滚动时添加类以显示 2 个 css 动画。

如果我只使用向下滚动动画效果很好，但是当我同时使用向上滚动和向下滚动动画时它会不一致。

我在让动画连续多次触发时遇到问题。如同向下滚动暂停、向下滚动暂停、向上滚动暂停、向上滚动暂停。

Here's a jsFiddle to better demonstrate the problem.

和代码-

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

【问题讨论】：

我查看了 jsFiddle，但无法弄清楚您对 getting animations to fire multiple times 的意思。我真的没有在 jsFiddle 中看到任何动画？

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

好的，那我打开我的FF。今晚晚些时候我会调查你的问题。

【参考方案1】：

我想通了……

我只需要更改删除动画的方式。我没有使用延迟和队列，而是检测到 animation end 并以这种方式将其删除。

Working Example

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