jQuery

Question

我想在用户滚动并尝试使用 .animate() 方法时让图像弹出进出视图。它在技术上是可行的，但非常缓慢，有时甚至在 window 滚动回顶部时都不会返回。这是一个示例 fiddle：EXAMPLE

$(window).scroll(function(){
    if($(this).scrollTop() > 50){
        $('.rot-frog').animate({
            'bottom': '-80',
            'right': '-40'
        }, 500);
    }else{
        $('.rot-frog').animate({
            'bottom': '-12',
            'right': '-6'
        }, 500);
    }
});

我没有收到任何控制台错误，并且我尝试了各种 CSS 属性，但得到了相同的延迟结果。所以我假设它与 .scroll() 和 .animate() 组合有关，我只是不确定为什么。我试过搜索类似的问题，但找不到我要找的东西。有人可以告诉我为什么会这样吗？

Answer 1

滚动事件在滚动移动期间触发（而不是在滚动结束时），因此要执行大量动画功能。
如果每次向上或向下滚动移动只调用一次动画函数，问题将得到解决。

试试这个：

var animateOnce = true;
$(window).scroll(function(){
    if($(this).scrollTop() > 50 && animateOnce == true){
        animateOnce = false;
 
        $('.rot-frog').animate({
            'bottom': '-80',
            'right': '-40'
        }, 500);
    }else if($(this).scrollTop() <= 50 && animateOnce == false){
        animateOnce = true;

        $('.rot-frog').animate({
            'bottom': '-12',
            'right': '-6'
        }, 500);
    }
});

jQuery - .animate() 在滚动时非常延迟

jQuery - .animate() very delayed on scroll

css

jquery-animate