获取jQuery动画函数无限循环？

Question

  

可能重复：
  How do I loop this animation indefinitely?

有人可以告诉我如何让这个脚本重复或循环（因为没有结束动画功能并永远永远地继续它）。

我是javascript的新手，如果有人能够告诉我我能做些什么来实现这一点，我将不胜感激。

谢谢。

$(document).ready(function() {
    var rageImg = $('.foo');
    $(rageImg).animate({top:'+=100px'}, 1000).animate({top:'-=100px'}, 1000);
});

Answer 1

$(function loop() {
    $('.foo').animate({ top: '+=100px' }, 1000, function() {
        $(this).animate({ top: '-=100px' }, 1000, loop);
    });
});

DEMO： http://jsfiddle.net/VC3S6/

Answer 2

function loop() {
    $(rageImg).animate({top:'+=100px'}, 1000).animate({top:'-=100px'}, loop);
}

$(document).ready(function() {
    loop();
});

演示：http://jsfiddle.net/JD9hN/

Answer 3

仅限CSS：

.foo {
  animation:sway 1s infinite alternate;
  position:relative;
}
@keyframes sway {
  from {top:0px}
  to {top:100px}
}

为Chrome支持添加-webkit前缀（-webkit-animation，@-webkit-keyframes）。

适用于IE10，Firefox 16（为Firefox 5添加-moz-前缀，但15）和Chrome 4。

因为这很可能是审美的，所以没有得到支持也没什么大不了的。

jQuery回答：

$(function() {
  $('.foo').animate({top:'+=100px'},1000)
                   .animate({top:'-=100px'},1000,arguments.callee);
});