1

（例として）アニメーション化するために3つのdivを設定しようとしています。すべてのアニメーションでアニメーションが完了したら、アニメーションを開始する関数を再度実行します。

関数名ではなくアラートをそこに貼り付ければ、コールバックは正常に機能しますが、関数名では何も起こりません。

$(function () {
function runIt() 
{
    $('.three').animate({'background-position-x': "-200px", 'background-position-y': "0px"}, 500,'linear');
    $('.two').animate({'background-position-x': "-400px", 'background-position-y': "0px"}, 500, 'linear');
    $('.one').animate({'background-position-x': "-600px", 'background-position-y': "0px"}, 500, 'linear', runIt);
}
runIt();
});

アニメーションの速度は大幅に向上します。テストのために、0.5秒しかかからないほうが簡単です。

ここのjsfiddle：http: //jsfiddle.net/erinfreeman/J9Htj/

4

1 に答える 1

0

このフィドルをチェックしてください。Safari6で動作します。

$(function () {
    function runIt() 
    {
        $('.three').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-200px", 'background-position-y': "0px"}, 500);
        $('.two').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-400px", 'background-position-y': "0px"}, 500);
        $('.one').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-600px", 'background-position-y': "0px"}, 500, runIt);
    }
    runIt();
});

反復ごとに値をリセットします。</ p>

于 2012-08-20T14:30:03.027 に答える