JQuery and animation around the center point

Question

I would like to know the best way to animate an element in a circular motion around a central point?

I could not understand this ... :(

Thanks in advance.

Neuroflux.

Answer 1

The easiest thing I can think of:

• make the relative position of the center point
• make the animated element a child.
• calculate top, left using:
  math.sin (time * (angle / second)) * distance
  Math.cos (....)

simple demo:

var elem = $('h1:eq(0)') .append('<span id="round" style="position:absolute;background-color:red;">&nbsp;</span>') .css('position','relative') .find('span#round'); var i = 0; setInterval(function(){ ++i; elem.css({'left': Math.sin(i * 0.02) * 100, 'top': Math.cos(i * 0.02) * 100});}, 100); 

Take a look at the action in jsfiddle .

Answer 2

Use the jquery.path plugin and here is a demo .

(found this from another question: How could you animate something so that it follows a curve? )