jQuery and animating around a central point

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

I couldn't quite figure it out... :(

开发者_开发问答Thanks in advance.

Neuroflux.

---

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

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

---

easiest i can think of is:

1. make the central point position relative
2. make the animated element to be child of above
3. calculate the 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);

See it in action at jsfiddle.