Javascript jQuery Transit动画未在for循环中正确执行_Javascript_Jquery_For Loop_Jquery Animate_Nonblocking

Javascript jQuery Transit动画未在for循环中正确执行

javascript jquery for-loop

Javascript jQuery Transit动画未在for循环中正确执行,javascript,jquery,for-loop,jquery-animate,nonblocking,Javascript,Jquery,For Loop,Jquery Animate,Nonblocking,我正在使用设置一个变化元素的动画我正在使用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.t

我正在使用设置一个变化元素的动画

我正在使用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>


window.onload=函数（）{
$（'div.test'）.mouseover（函数（）{
对于（变量i=0；i<2；i++）{
log（i+‘启动循环’）；
//旋转框动画
$（'div.test'&&'.+i）.transition({
透视图：“100px”，
旋转角度：'-180度'，
x:“-90px”
}，'slow'，function（）{
//完成代码。
$（'div.test'&&'.+i）.append（'With Changed Text'）；
log（i+“文本已更改”）；
//回转
$（'div.test'&&'.+i）.transition({
透视图：“100px”，
旋转方向：“0度”，
x:'0px'
}“慢”）；
});
log（i+'finishedtheloop'）；
警报（i+‘完成循环’）；
}
});
}

以及HTML：

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


框1
框2

它的工作原理是使长方体移动，进行适当的更改，然后移回其原始位置

但是，与其等待第一个动画完成，然后再转到for循环的下一个迭代，不如等待for循环完成，然后再执行

$.transition（）

函数

因此，当调用

$.transition（）

函数时，

i=2

。因此，

$.append（）

函数正在将类“.2”附加到不存在的元素

有没有办法确保动画在循环中正确执行

注意这是我真实代码的简化版本。我通常会为每个框添加不同的值。我还遍历了一个可能超过2的列表

EDIT我通过递归遍历数组找到了解决方案

我认为您已经具备了来回设置长方体动画所需的代码，但是，for循环会立即执行（从而几乎同时触发转换）

看看这个例子。您应该能够根据需要多次修改它以循环。

另外，我不确定是否可以将jQuery选择器与&&结合使用，至少它不是首选方法。见：

编辑：由于您试图在ajax调用成功时执行动画，因此可以按CSS类将特定框作为目标。见：

这是一个正式的答案，下面是我的新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>


功能旋转盒（列表）{
如果（list.length如果我真的使用mouseover，这就行了。在本例中，mouseover只是一个任意触发器。在实际代码中，动画需要在ajax请求成功后触发。请求返回一个json对象，其中包含列表，告诉函数要更改哪些框以及要更改哪些框。所有ng框需要一起旋转或按顺序旋转，不需要用户的提示。我想我会按照您的意思进行。因此，您执行一个ajax请求，并在完成后为相应的框设置动画。我假设您希望通过ajax响应中返回的某个整数来确定框的目标，这是正确的。因此，以整数命名的类。我最终找到了一个通过递归迭代数组来工作的解决方案。循环是非阻塞的。是递归的时候了！