Question

我正在创建一个需要老式CRT效果的网站。我的电视静电工作很好，但是我需要一个厚的失真条来上下移动。

为此，我做了100％宽度，200px高的div，我想从页面顶部开始，向下移动，然后在击打底部，拉回到顶部，然后从头开始。

我让它一直工作到循环部分。它向下移动，重置到顶部，然后我希望动画的功能重复。

这是我的代码：

$(document).ready(function()
{
    //vars
var windowHeight = $(window).height();
var lineHeight = $('#bar').height();
var desiredBottom = windowHeight - lineHeight;
var newPosition = desiredBottom;
var moving = $('#bar');

animate_loop = function()
{
//FUNCTION ACTIONS
moving.animate({top:newPosition},
{
    duration: 2000,
    complete: function() 
    //function on completion - reset to top
    {
        $('#bar').animate({top:0},100);

    }


});

}//end of animate_loop = function()

animate_loop();

});// end of document ready

我将它设置为动画时向下移动，它完美地拉回到顶部，然后......没有。在此之前我尝试了一些方法，但后来我在这里看到了一个动画循环线程，它以完全相同的方式布局。有人可以指出当我尝试执行“animate_loop（）;”时为什么我的动画不会循环接近尾声？

Answer 1

为了清楚起见，省略了文档就绪处理程序和配置变量，动画代码本身的最简单选项只是一个完成回调，加上立即调用的函数表达式

(function loop() {
    moving.animate({top: newPosition}, 2000)
          .animate({top: 0}, 100, loop);
})();

这四行代码块将自动启动（即不需要单独的显式调用），不创建新变量（loop仅在其自身范围内可见）并且不使用额外的定时器。 / p>

Answer 2

动画完成后，您可以在.animate()中使用内置函数调用。像这样：

$(document).ready(function () {
    //vars
    var windowHeight = $(window).height();
    var lineHeight = $('#bar').height();
    var desiredBottom = windowHeight - lineHeight;
    var newPosition = desiredBottom;
    var moving = $('#bar');
    animate_loop = function () {
        //FUNCTION ACTIONS
        moving.animate({
            top: newPosition
        }, {
            duration: 2000,
            complete: function ()
            //function on completion - reset to top
            {
                $('#bar').animate({
                    top: 0
                }, 100, animate_loop);
        }
        });
} //end of animate_loop = function()
animate_loop();
}); // end of document ready

Answer 3

animate_loop = function () {
    //FUNCTION ACTIONS
    moving.animate({ top: newPosition },{
        duration: 2000,
        complete: function () { //function on completion - reset to top
            $('#bar').animate({ top: 0 }, 100, function () {
                animate_loop(); // <--
            });
        }
    });
}

你最后必须再次打电话。

循环播放jQuery动画，一遍又一遍？

3 个答案: