Question

我正在尝试使用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个检查点的图像。我想要实现的是能够在每个检查点之后更改动画的速度。因此，如果我更新第1和第2个动画之间的文本框，第3个将会更快或更慢，具体取决于我写的内容。

我尝试使用$.fn.delay和setTimeout，但却无法做到这一点，它仍然使用文本框中的第一个值，从不使用任何其他值。

我应该如何实现这一目标？

Answer 1

由于javascript是异步的，因此所有动画都在同时运行。因此，一旦调用该函数，您的$('#vitesse').val()在所有这四个调用中的值都相同。您可以通过在动画调用中使用回调函数来解决这个问题。

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.
    });
});

jQuery动画链接在运行时更改动画速度

1 个答案: