How to make an image move along a circular path using jquery?

Question

Here I am trying to make the image move along a circular path, but it does not move along a circular path. I tried how it slowly moving the image

CSS

#friends { position: absolute; } 

Markup

 <img src="http://jsfiddle.net/img/logo.png" id="friends"/> 

Js

 function moveit() { var newTop = Math.floor(Math.random()*350); var newLeft = Math.floor(Math.random()*1024); var newDuration = Math.floor(Math.random()*5000); $('#friends').animate({ top: newTop, left: newLeft, }, newDuration, function() { moveit(); }); } $(document).ready(function() { moveit(); }); 

Live demo: http://jsfiddle.net/W69s6/embedded/result/

Any suggestion

Answer 1

Another option (based on Div Moving in a rotation loop using Javascript ):

 var t = 0; function moveit() { t += 0.05; var r = 100; // radius var xcenter = 100; // center X position var ycenter = 100; // center Y position var newLeft = Math.floor(xcenter + (r * Math.cos(t))); var newTop = Math.floor(ycenter + (r * Math.sin(t))); $('#friends').animate({ top: newTop, left: newLeft, }, 1, function() { moveit(); }); } $(document).ready(function() { moveit(); });​ 

DEMO: http://jsfiddle.net/W69s6/20/

Answer 2

Take a look at this awesome jQuery.path plugin :)

Answer 3

Try using Animate:

 function animateCircle(id, speed, radius, startx, starty, phi) { if (!phi) { phi = 0 }; var int = 2 * (Math.PI) / speed; phi = (phi >= 2 * (Math.PI)) ? 0 : (phi + int); var $m = startx - radius * Math.cos(phi); var $n = starty - radius * Math.sin(phi); $("#friends").animate({ marginLeft: $m + 'px', marginTop: $n + 'px' }, 1, function() { animateCircle.call(this, id, speed, radius, startx, starty, phi) } ); }; 

You can call a function for any div as follows:

 animateCircle('#friends', 100, 100, 400, 250); 

DEMO : http://jsfiddle.net/W69s6/18/

DEMO 2 : http://jsfiddle.net/W69s6/34/

Adapted from here .