2

我正在尝试使用 jQuery animate 方法对对象进行一些翻译。

考虑以下代码段：

$(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 个检查点的图像。我想要实现的是能够在每个检查点之后改变动画的速度。因此，如果我在第一个和第二个动画之间更新文本框，第三个动画会更快或更慢，具体取决于我写的内容。

我已经尝试过$.fn.delay  但setTimeout不太能够做到这一点，它仍然使用文本框中的第一个值，并且从不使用其他任何东西。

我应该怎样才能做到这一点？

4

1 回答 1

2

由于 javascript 是异步的，因此您的所有动画都在同时运行。因此，$('#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 回答