jquery - 完成后一遍又一遍地循环 jQuery 动画？

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 仅在其自身范围内可见)并且不使用额外的内容计时器。