javascript - animate() が継続的に動作しない

Question

jQueryで#ani継続的にアニメーションを使いたい。animate()私のコードは 1 回しか機能しません。このアニメーションをループさせるにはどうすればよいですか?

HTML

<div id="ani">animation</div>

脚本

$('#ani').css('position','absolute');

setTimeout(function(){
    $('#ani').animate({top:'-10px'},2000)
},100);

setTimeout(function(){
    $('#ani').animate({top:'20px'},2000)
},100);

score 2 · Accepted Answer

$('#ani').css('position','absolute');
function loop(){
    $('#ani').animate({top:'-10px'},2000,function(){
        $('#ani').animate({top:'20px'},2000,function(){
               loop();            
        }) ;                
    })    

}
loop()

変更されたオンラインデモを見ることができると思います: http://jsfiddle.net/9hN2g/5/

score 1 · Accepted Answer

setInterval()ではなくを使用しsetTimeout()、アニメーションの 2 番目の部分を最初のコールバックとして呼び出す必要があります。これを試して：

function animate() {
    $('#ani').stop(true, true).animate({ top: '-10px' }, 1000, function() {
        $('#ani').stop(true, true).animate({ top: '20px' }, 1000)
    })
}

animate(); // on load
setInterval(animate, 2000); // set to run continously

フィドルの例

score 1 · Accepted Answer

現在のコードが言っていることは次のとおりです。

10 分の 1 秒後 ( )、 -10px100msに移動する 2 秒間のアニメーションを開始します。#ani
まったく同時に (別の)、 20px100msに移動する別の 2 秒間のアニメーションを開始します。#ani

ここで jQuery が行うことは、2 番目のアニメーションをキューに入れることです。コードは次のように記述できます。

setTimeout(function(){
    $('#ani').animate({top:'-10px'}).animate({top:'20px'}),2000);
},100);

連続アニメーションに必要なのは、callbacks;を使用することです。アニメーションの完了時に呼び出す関数。

function moveUp() {
   $('#ani').animate({ top: -10 }, 2000, moveDown);
}

function moveDown() {
   $('#ani').animate({ top: 20 }, 2000, moveUp);
}

setTimeout(moveUp, 100);

score 0 · Accepted Answer

これを一度http://jsfiddle.net/9hN2g/8/を参照してください。 setTimeout() 関数を setInterval() に置き換えるだけです。

差分をよりよく理解するために、このリンクを一度通過してください。

$('#ani').css('position','absolute');

setInterval(function(){
    $('#ani').animate({top:'-10px'},2000)
},100);

setInterval(function(){
    $('#ani').animate({top:'20px'},2000)
},100);

score 0 · Accepted Answer

関数を再帰的にします。

$('#ani').css('position', 'absolute');
anim1();
function anim1() {
    setTimeout(function() {
        $('#ani').animate({
            top: '-10px'
        }, 2000, function(){
            anim2();
        });
    }, 100);
}

function anim2() {
    setTimeout(function() {
        $('#ani').animate({
            top: '20px'
        }, 2000, function(){
            anim1();
        });
    }, 100);
}

デモ

javascript - animate() が継続的に動作しない

5 に答える 5

Related

Reference