Home/ Questions/Q 8319091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T22:12:31+00:00

I am using jQuery Transit to animate a changing element. I am animating multiple

  • 0

I am using jQuery Transit to animate a changing element.

I am animating multiple boxes using a for loop.

The 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>

And the HTML:

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

It is supposed to work by making the box move, make the appropriate changes, and then move back to its original position.

However, instead of waiting for the first animation to finish before moving on to the next iteration of the for loop, it seems to be waiting until the for loop is finished before it executes the $.transition() functions.

So when the $.transition() functions are called, i = 2. Therefore the $.append() function is appending to an element with the class ‘.2’, which does not exist.

Is there any way to make sure the animations execute within the loop properly?

NOTE This is a simplified version of my real code. I would normally be appending different values for each box. I am also iterating through a list which could possibly be longer than 2.

EDIT I found a solution by recursively iterating through the array. Here it is.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just so this has an official answer, here is my new javaScript code. 

    <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>

    And a demo: http://jsfiddle.net/bHsL3/6/.

    • 0