Ich muss mit jquery mehrere Bilder im selben Orbitkreis drehen. Ich habe die Zeitintervalle für beide Bilder geändert und verzögert. Das Problem ist, dass sich beide Bilder nach wenigen Sekunden überlappen. Mein Code ist

<code>            <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>
</code>

Meine CSS- und HTML-Quellcodes sind

<code>   #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" />
</code>

Live-Demo:http://jsfiddle.net/W69s6/embedded/result/ aber dies ist für ein einzelnes Bild .. Irgendein Vorschlag?

edit :: mein bild

oder

Beispiellinkhttp://www.templatemonster.com/demo/38228.html