Rodar várias imagens em um círculo usando jquery
Eu preciso rodar várias imagens no mesmo círculo de órbita usando jquery.Eu mudei e adiei os intervalos de tempo para ambas as imagens. O problema é que ambas as imagens estão sobrepostas após alguns segundos. meu código é
<script type="text/javascript">
var p = 0;
function moveit() {
p += 0.02;
var r = 135;
var xcenter = 500;
var ycenter = 200;
var newLeft = Math.floor(xcenter + (r * Math.cos(p)));
var newTop = Math.floor(ycenter + (r * Math.sin(p)));
$('#friends').animate({
top: newTop,
left: newLeft,
}, 10, function() {
moveit();
$('#friends2').animate({
top: newTop,
left: newLeft,
},15, function() {
moveit();
});
}
$(document).ready(function() {
moveit();
});
</script>
meus códigos fonte css e html são
#friends { position: absolute; }
#friends2 { position: absolute; }
<img src="Images/info.gif" id="friends"/>
<img src="Images/circle.jpg" id="circles" />
<img src="Images/help.gif" id="friends2" />
Demonstração ao vivo:http://jsfiddle.net/W69s6/embedded/result/ mas isso é para uma única imagem .. Alguma sugestão?
editar :: minha imagem
ou
exemplo de linkhttp://www.templatemonster.com/demo/38228.html