jQuery转换动画不能正确执行for循环

我正在使用jQuery Transit动画变化的元素。jQuery转换动画不能正确执行for循环

我使用for循环动画多个框。

的JavaScript：

<script> 
window.onload = function(){ 
    $('div.test').mouseover(function(){ 
    for (var i = 0; i < 2; i++){ 
     console.log(i+' Starting Loop'); 

     //Rotate box animation 
     $('div.test' && '.'+i).transition({ 
     perspective: '100px', 
     rotateY: '-180deg', 
     x: '-90px' 
     }, 'slow',function(){ 
     //On completion code. 
     $('div.test' && '.'+i).append(' With Changed Text'); 
     console.log(i + 'Text has been changed'); 

     //Rotate back 
     $('div.test' && '.'+i).transition({ 
      perspective: '100px', 
      rotateY: '0deg', 
      x: '0px' 
     }, 'slow'); 
     }); 
     console.log(i + 'finished the loop'); 
     alert(i + ' finished loop'); 
    } 
    }); 
} 
</script>

和HTML：

<body> 
<div class='test 0'> 
    Box1 
</div> 
<div class='test 1'> 
    Box2 
</div> 
</body>

它应该通过使框移动到工作，进行适当的修改，然后再移回原来的位置。

但是，在继续执行for循环的下一次迭代之前，不是等待第一个动画完成，它似乎在等待for循环完成，然后才会执行$.transition()函数。

所以当调用$.transition()函数时，i = 2。因此，$.append()函数将附加到类“.2”的元素，该元素不存在。

有什么方法可以确保动画在循环内正确执行吗？

注意这是我的真实代码的简化版本。我通常会为每个盒子附加不同的值。我也遍历可能超过2的列表。

编辑我找到了一个通过递归迭代遍历数组的解决方案。 Here it is.

来源

2012-07-27 KStensland

循环是非阻塞的。递归的时间！ – 2012-07-27 20:30:13

就这样，这有一个正式的答案，这里是我的新的javaScript代码。

<script> 
function rotateBox(list){ 
    if (list.length <= 0){ 
    return; 
    } 

    var i = list.pop(); 
    console.log("i: "+i); 

    $('div.test' && '.'+i).transition({ 
    perspective: '100px', 
    rotateY: '-180deg', 
    x: '-90px' 
    }, 'slow',function(){ 
    //On completion code. 
    $('div.test' && '.'+i).append(' With Changed Text'); 
    console.log(i + 'Text has been changed'); 

    //Rotate back 
    $('div.test' && '.'+i).transition({ 
     perspective: '100px', 
     rotateY: '0deg', 
     x: '0px' 
    }, 'slow', function(){ 

     //Recursion! 
     rotateBox(list); 
    }); 
    }); 

} 

window.onload = function(){ 

    //a list of arbitrary values that match with a <div> class 
    list = [0, 1]; 

    $('div.test').mouseover(function(){ 
    rotateBox(list); 

    //Just in case you feel like running through it again 
    list = [0, 1]; 
    }); 
}; 
</script>

并演示：http://jsfiddle.net/bHsL3/6/。

来源

2012-07-28 16:58:56 KStensland

我认为你已经有了必要的代码来使盒子来回动画，但是，你的for循环正在立即执行（从而在几乎同时触发转换）。

看看这个例子。您应该可以修改它以根据需要循环多次。 http://jsfiddle.net/zca33/

而且，我不能肯定，您可以用& &结合jQuery选择，至少，它不是首选的方法。请参阅：http://api.jquery.com/multiple-selector/

编辑：由于您试图在ajax调用成功时执行动画，因此您可以通过CSS类定位特定框。请参阅： http://jsfiddle.net/zca33/2/

来源

2012-07-27 18:47:58

这将工作，如果我实际上使用鼠标悬停。在这个例子中，mouseover只是一个任意的触发器。在真实的代码中，动画需要通过ajax请求的成功来触发。该请求返回一个包含列表的json对象，该列表告诉函数哪些方框需要更改以及要更改哪些方框。所有旋转的盒子都需要一起旋转或按顺序旋转，由用户自发旋转。 – KStensland 2012-07-27 18:57:25

我想我遵循你所说的话。因此，您执行ajax请求，并在完成时为相应的框设置动画。我假设你想通过在ajax响应中返回的某个整数来定位框来执行此操作？ – 2012-07-27 19:01:00

这将是正确的。因此，以整数命名的类。 – KStensland 2012-07-27 19:03:00

jQuery转换动画不能正确执行for循环

回答

相关问题