0

変化する要素をアニメーション化するためにjQueryTransitを使用しています。

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 に答える