Question

我使用jQuery Transit为变化的元素设置动画。

我使用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循环的下一次迭代之前，不是等待第一个动画完成，而是在执行$.transition()函数之前等待for循环完成。

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

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

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

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

Answer 1

我认为你已经拥有了来回激活盒子所需的代码，但是你的for循环正在立即执行（从而几乎同时触发过渡）。

看看这个例子。您应该能够根据需要将其修改为循环次数。 http://jsfiddle.net/zca33/

另外，我不确定你是否可以将jQuery选择器与＆amp;＆amp;组合，至少，它不是首选的方法。请参阅：http://api.jquery.com/multiple-selector/

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

Answer 2

这是正式答案，这是我的新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/。

jQuery Transit动画没有在for循环中正确执行

2 个答案: