How to CONSTANTLY rotate an object with jquery?

Question

OKAY! Here's the situation. I've got a jQuery plugin that's animating a background-image in my header to constantly scroll left-to-right. I have a .png of a wheel sitting on this header. I need to have the wheel constantly spinning with the moving background.

CSS3- Yes I could use CSS3, but then some poor soul using Internet Explorer would see a stationary wheel on a moving background which would be weird.

jQuery Plugins- This is what I'd LIKE to use, but I have yet to find one that will constantly rotate the image. Most only rotate by a certain angle when you activate it.

If anybody has any thoughts, I'd appreciate it!

Maybe show some code and/or image examples. If compatibility is important, have you considered using an animated GIF? — Pekka, Feb 17 '11 at 17:06
I'm speculating that the rotation of the wheel should sorta match the movement of the road, and thusly it would be nice to have some JavaScript variables to work with that would allow these to sync up. Is that a fair guess, @KThornbloom? — MrBoJangles, Feb 17 '11 at 17:38

score 13 · Accepted Answer · answered Jun 30 '11 at 15:01

13

You could try this:

http://code.google.com/p/jqueryrotate/wiki/Examples

    var rotation = function (){
   $("#img").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();

answered Jun 30 '11 at 15:01

Kaos

754
1
8
13

how would I stop the rotation? – Fabio Sep 05 '15 at 19:44
The link no longer works - is there another repository for this library? – Fredulom Feb 19 '20 at 12:42

score 6 · Answer 2 · answered Feb 17 '11 at 17:21

6

Check out my post:

enter image description here

answered Feb 17 '11 at 17:21

Sarfraz

377,238
77
533
578

Ooh, fancy! Nice and smooth, too. – MrBoJangles Feb 17 '11 at 17:28

score 4 · Answer 3 · answered Feb 17 '11 at 17:14

4

It's not jQuery as such, but if you want to do something constantly in JavaScript, use setInterval(), like so:

setInterval("alert('Rotate!');", 100);

But replace the alert with your rotation code, and the interval is in milliseconds.

answered Feb 17 '11 at 17:14

MrBoJangles

12,127
17
61
79

Thanks! Looks like that's the key, and Sarfraz down there has examples for me to look at with that code. – kthornbloom Feb 17 '11 at 17:39
True that. For what it's worth, his code contains `setInterval()`. And it's way nifty. – MrBoJangles Feb 17 '11 at 17:41
Hmm, I'm still a little confused. Sarfraz's method only works once you click on it, and only rotates once although the title of the blog says "continuous rotation". Maybe I'm missing something? – kthornbloom Feb 17 '11 at 18:47
It is the conditional that is in Sarfraz' code, if (counter != -360) {...}. Once that is no longer true, it stops a-rotatin'. Just for completeness, I might add an else statement to clearInterval() at that point. – MrBoJangles Feb 17 '11 at 20:02

score 1 · Answer 4 · edited May 23 '17 at 12:33

1

It looks like you want this answer to a related question about rotating images with jQuery...

But it's purely a rotating wheel, then a two or three frame animated gif will probably be easier, faster, and less CPU-intensive...

edited May 23 '17 at 12:33

Community

1
1

answered Feb 17 '11 at 17:19

Stobor

44,246
6
66
69

Thanks for the suggestion. The reason I didn't go for an animated gif is because I wanted the animation to be nice and smooth, and also to be able to easily control the speed. – kthornbloom Feb 17 '11 at 17:38

score 0 · Answer 5 · answered Oct 16 '12 at 19:22

0

I have created a plugin for this, which works with internet explorer 7 and 8 as well! Here you go: http://wp-dreams.com/jquery-element-rotation-plugin/

answered Oct 16 '12 at 19:22

Ernest Marcinko

405
3
12

score 0 · Answer 6 · edited May 23 '17 at 12:16

0

@dietbacon asked how to stop a rotation. Since I cannot yet comment, I will answer here.

In this answer, I wrote a function that does an infinite rotation in a given element and that can be cancelled.

edited May 23 '17 at 12:16

Community

1
1

answered Nov 05 '16 at 05:28

vyrp

890
7
15

score 0 · Answer 7 · answered Feb 22 '12 at 13:19

0

You can use jquery plugin for rotating image like 3d object:

pic360 plugin

answered Feb 22 '12 at 13:19

Somnath Muluk

55,015
38
216
226

How to CONSTANTLY rotate an object with jquery?

7 Answers7