¿Cómo hacer que una imagen se mueva en una ruta circular usando jquery?

Question

Aquí estoy tratando de hacer una imagen se mueva en una trayectoria circular, pero no se está moviendo en una circular path..I han tratado como éste Moving a picture around slowly

CSS

#friends { position: absolute; } 

marcado

<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(); 
}); 

demostración en directo: http://jsfiddle.net/W69s6/embedded/result/

¿Alguna sugerencia?

Answer 1

Otra variante (basado en Div Moving in cycle rotation 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

Echa un vistazo a este plugin increíble jQuery.path :)

Answer 3

Prueba esto utilizando 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) 
      } 
    ); 

}; 

Usted puede llamar a la función para cualquier div así:

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

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

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

Adaptado de here.