.animate 和 .scrollTop 动画不流畅答案

【问题标题】：animation not fluid with .animate and .scrollTop.animate 和 .scrollTop 动画不流畅
【发布时间】：2013-09-29 23:55:37
【问题描述】：

我试图在用户向下滚动页面时触发动画。所以当他滚动超过某个点时，我希望有一个 div 在网页中滑动，如果用户向上滚动，我不希望它滑开。

它工作正常，只是当我在动画期间上下滚动时它会延迟它并且运动根本不流畅。

我正在使用这个 javascript 来触发动画：

    $(document).ready(function() { 
    jQuery(function($) {
        function fixDiv() {
            var $cacheLaptop = $('#red-div');
            var check=new Boolean();
            check=false;
            if ((check==false) && ($(window).scrollTop() > 500)) {  
                check=true;    
                $cacheLaptop.stop().animate(
                    { left: 0 }, {
                     duration: 1000,
                 });   
            }
        }
        $(window).scroll(fixDiv);
        fixDiv();
    });

});

我创建了一个 jsfiddle，所以你可以看到我的问题：http://jsfiddle.net/B4WEV/3/

有人知道如何解决这个问题吗？

非常感谢！

【问题讨论】：

标签： javascript jquery jquery-animate scrolltop

【解决方案1】：

我认为这更符合您的目标。

$(document).ready(function() { 
    function fixDiv() {
        var $cacheLaptop = $('#red-div');
        if (($(window).scrollTop() > 500)) {   
            $cacheLaptop.animate(
                { left: 0 }, {
                    duration: 1000,
                });   
            $cacheLaptop.off('scroll');
        }
    }
    $(window).scroll(fixDiv);
    fixDiv();
});

您的代码发生的情况是，每次用户滚动时都会调用 fixDiv 函数，并从 div 的当前位置重新开始动画，持续时间为 1 秒。这显然不是您想要的，您试图通过检查是否设置了标志来缓解这种情况 - 但是您在处理程序函数的范围内定义布尔值，因此每次调用处理程序时都会重新定义它（在在这种情况下，每次用户滚动。）

相反，当用户滚动时调用处理函数，仅当滚动到 500 像素标记以下时才会产生动画，然后通过调用 $cacheLaptop.off('scroll'); 移除滚动处理程序

希望对您有所帮助。

【讨论】：

【解决方案2】：

你应该使用这个插件： http://imakewebthings.com/jquery-waypoints/ 触发动画开始，然后让它播放。

【讨论】：