CODEWITHSUNDEEP
javascriptjquery
Dejell
Dejell

Reputation: 14317

jQuery animate circle

I need to animate a circle with Jquery:

The circle will be a round picture (let's say a ball) that will turn around itself 360 degrees.

How can I do it without flash?

It should stay in the same place, but will only rotate (wander around)

Upvotes: 3

Views: 5545

Answers (5)

Jean
Jean

Reputation: 69

For CSS3 transitions and transforms, you can better use this nice jQuery plugin: http://ricostacruz.com/jquery.transit/

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

Not sure what you actually want, but assuming you want it to rotate on it's own axis, have a look at this code I just whipped up:

http://jsfiddle.net/RpjuD/2/

This only works in browsers with animation support, but nowadays that's really only IE. IE10 has support.

To get a rotation animation in older browsers, you are kind of stuck - there aren't many options short of using an animated gif. IE does support a rotation property, but it's very limited.

You could use something like https://github.com/clearideaz/jQuery.rotate/blob/master/jrotate.plugin.js to get it working everywhere, but to be honest, usually the CPU cost for users stuck on old browsers with old hardware isn't worth it.

Upvotes: 2

terjeto
terjeto

Reputation: 386

Use CSS3 as pointed out by the others, or use SVG (e.g. http://raphaeljs.com/) or Canvas.

Upvotes: 0

ariejdl
ariejdl

Reputation: 121

You will only be able to rotate an element if the browser is CSS3 compatible (minus other hacks such as this http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html), in which case you should set a timing function to adjust the following CSS:

-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);

see this:

http://davidwalsh.name/css-transform-rotate

Upvotes: 0

Thomas Brasington
Thomas Brasington

Reputation: 588

Lea Verou posted a solution using css3 http://lea.verou.me/2012/02/moving-an-element-along-a-circle/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+leaverou+%28Lea+Verou%29&utm_content=Netvibes

Upvotes: -1

Related Questions