Question

我有一个for循环，该循环遍历一个数组，并对一个元素从一个位置移动到另一个位置的动画进行了短暂的延迟；这很完美。但是，当我尝试在每个动画之后更改元素的属性时，它改为将其更改为第一个动画之后的最后一个数组元素的值。

该数组本质上类似于[{x:100, y:100},{x:200, y:200},{x:300, y:300},...]

for( let i = 0; i< arr.length; i++){
    pos = arr[i];
    $elem.delay(100)
         .animate({top: pos.y, left: pos.x}, 500, function(){
             $elem.attr('data-position-x', pos.x); 
             // other code will go here
         })
         // the element attribute is immediately set to "300", 
         // instead of 100 then 200 then 300 and so on 
}

我认为for循环在开始第一个动画时已经完成，因此pos被设置为数组中的最后一个值。动画会以某种方式与.delay排队，以便pos给出正确的值，但不能为回调中的.attr提供正确的值...我不确定如何解决这个问题。

TL; DR-回调函数不会在延迟.animate内延迟

我尝试使用.promise()和.then()，但到目前为止没有任何效果。有什么想法吗？

动画内的回调不延迟

0 个答案: