一緒に移動する必要があるdivのグループをアニメーション化しています。各divは異なるパスをたどり、同じ期間、同時に移動します。
アニメーションのこの部分が終わった後、他のものを再描画するためにいくつかのコードを実行したいと思います。
私はこれにjqueryを使用しています。これが私がしていることのサンプルコードです：
// units is an array containing the divs encapsulated on $()
for (var i = 0; i < units.length; i++)
{
var unit = units[i];
var idUnit = unit.attr('id');
// New coordinates
var xNew = layout.x[idUnit];
var yNew = layout.y[idUnit];
// Actual coordinates
var xAct = x(unit);
var yAct = y(unit);
// Animate!
unit.animate(
{left: xNew, top: yNew}, {
duration: 1000,
easing: 'easeOutBack'
}
);
}
実行したいコードを、アニメーション呼び出しの1つの完全なコールバックに置くことができますが、次のようなものを探しています。
queue.delay(1000).run(function(opts) {
// Code goes here!
});
これを行う方法はありますか？または、アニメーションを1回呼び出すだけで機能するようにコードを書き直して、カスタムステッパー関数を渡す必要がありますか？...
$unitsアニメーション化するすべての要素を保持するという名前のjQuery変数がある場合は、次のようにすることができます。
$units.each(function() {
var $unit = $(this),
id = $unit.attr('id');
var xNew = layout.x[id],
yNew = layout.y[id];
$unit.animate({ left: xNew, top: yNew },
{ duration: 1000, easing: 'easeOutBack' });
}).promise().done(function() {
// This will execute after all the animations have finished.
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加