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

-moz-IE10、Firefox 16（ Firefox 5から15のプレフィックスを追加）、およびChrome4で動作します。

~~これはおそらく美的であるため、サポートされないことは大したことではありません。~~

jQueryの答え：

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

3 に答える 3