How to create circular animation with different objects using jQuery?

Question

How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.

I want this animate but

Answer 1

Just use CSS3 to rotate the image:

html

<div id='container'>
... (all your images here)
</div>

javascript:

<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
      setInterval(function() {
        $("#container").css("transform","rotate(" + window.myRotation + "deg)");
        $("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
        $("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
        window.myRotation +=20;
      },50);
});
</script>

Answer 2

Using jQuery Animation: http://jsfiddle.net/eT7SD/6/

Using mathand jQuery : http://jsfiddle.net/eT7SD/7/

Using CSS3 Rotation (just for fun): http://jsfiddle.net/dMnKX/

Just add a class 'box' to your animating divs like in the fiddle and use this js:

$(document).ready(function(e) {

    var animate = function(){

        var boxes = $('.box');

        $.each(boxes, function(idx, val){

            var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();

            $(val).animate({

                "left" : coords.left,
                "top" : coords.top

            }, 1500, function(){})   

        });
    }

    animate();

    var timer = setInterval(animate, 2000);  
});

EDIT:

$(document).ready(function(e) {
    var angles = [90, 45, 315, 270, 225, 135];
    var unit = 215;

    var animate = function(){

        $.each($('.box'), function(idx, val){

            var rad = angles[idx] * (Math.PI / 180);
            $(val).css({
                left: 550 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad))  + 'px'
            });

            angles[idx]--;
        });

    }
    var timer = setInterval(animate, 10);

});

You have to change the left, top, width, height properties of boxes, standardize them, set the correct unit (circle radius) and initial angles. But for a preview, i think this is what you want (just needs a little more work).

Example: http://jsfiddle.net/eT7SD/7/

Visual understanding of angles:

Answer 3

Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work

FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)

I used .position() from jQuery to get the positions of div1 - div6.
Then moved the image there using .animate().

http://api.jquery.com/position/
http://api.jquery.com/animate/

HTML

<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>

JavaScript

$(document).ready(function(e) {
      var i = 1;
        var j = 2;
      setInterval(function() {
          if(i===7){i=1;}
          if(j===7){j=1;} 
          var divd = $("#apDiv"+i).position();
          var divds = $("#apDiv"+j).position();
          $("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
          $("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
          i++;j++;
      },1000);
});