1

私はこのコードを持っています:

jQuery('#flash').animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 200)
                .animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 200)
                .animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 600)

そして、その状態を何回変更するかは決めていません。アニメーションチェーンを編集してチェーン要素を追加/削除する代わりに、プログラムでアニメーションをチェーンする方法はありますか?

4

4 に答える 4

2

いいえ、アニメーション キューを編集せずにアニメーションをチェーンすることはできません。変数をチェーンしたいが回数が限られている場合は、ループで簡単に実行できます。

var flash = $("#flash");
for (var i=0; i<n; i++)
    flash.animate({opacity: 0.35}, 200).animate({opacity: 0}, 200);

無限ループ、または将来条件が満たされたときに停止するループが必要な場合は、アニメーション キューにコールバックをフックして、関数を再起動します。

var flash = $("#flash");
function anim() {
    // if (condition)
    flash.animate({opacity: 0.35}, 200).animate({opacity: 0}, 200, anim);
                                            // call "recursively": ^^^^
}
anim();
于 2012-09-15T11:16:38.670 に答える
2

私の理解が正しければ、必要なのは FOR ループだけです。

function animate_n_times(n) {
   var flash = $('#flash');
   for(var i=0;i<n;i++) {
      flash.animate({opacity: 0.35}, 200)
           .animate({opacity: 0}, 200);
   }

}

次に、次のように呼び出します。

animate_n_times(3);
于 2012-09-15T10:56:07.170 に答える
1

探している場合は、ループを使用してアニメーションを連鎖させることができます。

var $flash = jQuery('#flash'), i;

for (i = 0; i < 10; i++) {
    $flash = $flash.animate({opacity: 0.35}, 200)
                   .animate({opacity: 0}, 200);
}
于 2012-09-15T10:49:46.557 に答える
0

拡張jquery-timingを使用して、より短い代替手段があります。

指定された回数だけアニメーション化する:

$('#flash').repeat().animate({opacity:0.35}, 200)
    .animate({opacity:0}, 200).until(10);

無限ループとして:

$('#flash').repeat().animate({opacity:0.35},200).animate({opacity:0},200,$);

詳細については、.repeat()、.until(count)、および.animate(…,$)の API を参照してください。

于 2012-09-19T10:28:24.300 に答える