javascript - 让 jQuery 动画函数无限循环？

Question

可能重复：
如何无限期循环播放此动画？

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

我对javascript很陌生，所以如果有人能够告诉我我能做些什么来实现这一点，我将不胜感激。

谢谢你。

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

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

仅 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（-moz-为 Firefox 5 至 15 添加前缀）和 Chrome 4。

~~由于这很可能是审美问题，因此不受支持没什么大不了的。~~

jQuery 答案：

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

3 回答 3