0

我正在使用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 循环的下一次迭代，它似乎是在等待 for 循环完成后再执行$.transition()函数。

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

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

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

编辑我通过递归遍历数组找到了解决方案。这里是。

4

2 回答 2

1

我认为您已经拥有来回为框设置动画所需的代码，但是，您的 for 循环正在立即执行（从而几乎同时触发转换）。

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

另外，我不确定您是否可以将 jQuery 选择器与 && 结合使用，至少它不是首选方法。见：http ://api.jquery.com/multiple-selector/

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

于 2012-07-27T18:47:58.953 回答
0

就这样这有一个官方的答案，这是我的新 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-28T16:58:56.083 回答