0

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

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

非常感谢！

4

2 回答 2

0

我认为这更符合您正在尝试做的事情。

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

希望有帮助。

于 2013-09-30T00:15:43.480 回答
0

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

于 2014-01-09T11:42:00.340 回答