如何在jQuery上循环动画

Question

我只是想知道如何循环我的动画（1个水平移动的矩形）。 另外，如何在页面完全加载后进行动画制作，而不是像我的编码显示那样通过单击按钮来发起动画。 对不起，我是jQuery的新手，只是习惯了基础知识。谢谢你的帮助！

$(document).ready(function(){
  $("button").click(function(){
    $("#div2").animate({right:'1000px'}, 7000);
  });
});

HTML

<div id="div2" style="background:#e1e1e0;opacity:0.4;height:100px;width:500px;position:absolute;"></div>

Answer 1

将它放在一个函数中，然后让animate()方法调用它的回调参数中的函数：

function animateRect(){
    $("#div2").css({right:0}).animate({right:'1000px'}, 7000, animateRect);
}

我已经在那里添加了css()方法来重置元素的正确位置，否则只会有1个动画。

JSFiddle

Answer 2

如果我理解正确，您只需删除点击处理程序，如下所示：

$(document).ready(function(){
   $("#div2").animate({right:'1000px'}, 7000);
});

这样动画就会自动启动而无需点击