2

jQueryanimateメソッドを使用してオブジェクトのいくつかの翻訳を作成しようとしています。

次のスニペットについて考えてみます。

$(function() {
$('#camion').animate({ top: 120, left: 180}, $('#vitesse').val());
$('#camion').animate({ top: 180, left: 180}, $('#vitesse').val());
$('#camion').animate({ top: 220, left: 180}, $('#vitesse').val());
$('#camion').animate({ top: 330, left: 180}, $('#vitesse').val());
});

現在、$（'＃vitesse'）はテキストボックスです。$（'＃camion'）要素は、ページの4つのチェックポイントにアニメーション化する必要がある画像です。私が達成したいのは、各チェックポイントの後でアニメーションの速度を変更できるようにすることです。したがって、1番目と2番目のアニメーションの間でテキストボックスを更新すると、3番目のアニメーションは、何を書いたかに応じて速くなったり遅くなったりします。

私は試してみましたが$.fn.delay  、setTimeoutそれを完全に行うことはできませんでした。それでもテキストボックスの最初の値を使用し、他のものを使用することはありません。

どうすればこれを達成できますか？

4

1 に答える 1

2

JavaScript は非同期であるため、すべてのアニメーションが同時に実行されます。したがって、 your$('#vitesse').val()は、関数が呼び出されるとすぐに、これらの 4 つの呼び出しすべてで同じ値になります。アニメーション呼び出しでコールバック関数を使用することで、これを回避できます。

var txtBox = $('#vitesse'),
    camion = $('#camion');

camion.animate({ top: 120, left: 180}, txtBox.val(), function() {
    camion.animate({ top: 180, left: 180 }, txtBox.val(), function() {
        // keep going or write this recursively.
    });
});
于 2012-12-17T03:00:32.247 に答える