Question

I would like to have multiple images rotate, or gyrate, or spin, whatever the term best describes the 2D image rotate, from the same document.

The jquery plugin that does this for one image is: http://code.google.com/p/jqueryrotate/wiki/Examples

Although the example page shows many instances of rotating images, these are loaded from iframes. Meaning, each rotating image is the portion of another document shown through iframe.

I am trying to rotate different images, at different speeds, and in different angles and it is not working.

For example, for two images I used code

var angle = 0;

    setInterval(function(){
      angle+=3;
     jQuery(".process-1").rotate(angle);
},50);
setInterval(function(){
      angle-=3;
     jQuery(".process-2").rotate(angle);
},30);

Thank you

Answer 1

It seems to be working fine on multiple images. You did not explain what you wanted, but here is the code for spinning three images…

http://jsfiddle.net/RwEme/603/

var rotation = function (){
   $("#image, #image2, #image3").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
          return c*(t/d)+b;
      }
   });
}
rotation();

HTML:

<img src="https://www.google.com/images/srpr/logo3w.png" id="image"/>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image2"/>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image3"/>​

---

EDIT:

Here is another working demo based on edits to the OP.

http://jsfiddle.net/RwEme/604/

It wasn’t working because you’re trying to use the same variable (angle) for two different things.

var angle = 0,
    angle2 = 0;

setInterval(function() {
      angle += 3;
     $("#image").rotate(angle);
},80);
setInterval(function() {
      angle2 -= 3;
     $("#image2").rotate(angle2);
},20);​