Question

我试图在用户向下滚动页面时触发动画。因此，当他滚动超过某个点时，我想在网页中滑动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/

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

非常感谢！

Answer 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');来删除滚动处理程序

希望有所帮助。

Answer 2

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

动画与.animate和.scrollTop不流畅

2 个答案: