jquery - Orbiting <img> elements work but not <div> elements, why? -

i'm trying create effect elements orbit around center element jquery. have altered existing code , partially works.

my html code:

<div class="orbit-carousel" data-speed="30" data-explode-distance="0" data-vary-size="50" data-start-position="90" data-rewind="false" style="width: 700px; height: 350px;">         <img src="sun.png" class="thesun" />         <img src="planet1.png" class="planet" />                     <img src="planet2.png" class="planet" />         <img src="planet3.png" class="planet" />         <img src="planet4.png" class="planet" />         <img src="planet5.png" class="planet" />     </div>       <script>         $(window).load(function(){             $(".orbit-carousel").orbit();                     });     </script> 

and altered javascript code is:

(function($) {    $.fn.orbit = function(method) {      return this.each(function() {          var explode_size = 30;         if ($(this).attr("data-explode-distance"))             explode_size=parseint($(this).attr("data-explode-distance"));          var speed = 15;         if ($(this).attr("data-speed"))             speed=parseint($(this).attr("data-speed"));          var rewind = true;         if ($(this).attr("data-rewind"))             rewind = ($(this).attr("data-rewind")==true);          var vary_size_percent = 0;         if ($(this).attr("data-vary-size"))             vary_size_percent = parseint($(this).attr("data-vary-size"));           $(this).css("position","relative");         $(".planet",this).css("position","absolute");                  var satelites = $(".planet",this);         var firstsatelite = $(".planet:first",this);          $(satelites).mouseover(function(e) {           stopanimate();         });         $(satelites).mouseout(function(e) {           startanimate();         });          var eclipse_height = $(this).height()-firstsatelite.height();         var eclipse_width = $(this).width()-firstsatelite.width();           var center_x = $(this).width()/2;         var center_y = $(this).height()/2;          var sun_x = $("img.thesun").width();         var sun_y = $("img.thesun").height();          var sun_off_x = center_x - (sun_x / 2);         var sun_off_y = center_y - (sun_y / 2);          $("img.thesun",this).css("position","absolute");         $("img.thesun",this).css("left",sun_off_x);         $("img.thesun",this).css("top",sun_off_y);          var offset_x=center_x-firstsatelite.width()/2;         var offset_y=center_y-firstsatelite.height()/2;          var = eclipse_width/2;         var b = eclipse_height/2;           var ellipse_size_offset = explode_size;          var stopping = false;          var animationid;         var animation_position=0;          var animation_position_offset=0;         if ($(this).attr("data-start-position"))             animation_position_offset=parseint($(this).attr("data-start-position"))%360;          var animation_end_position = 361;         if ($(this).attr("data-end-position"))             animation_end_position=parseint($(this).attr("data-end-position"))%360;          var animation_direction_acw = false;         if ($(this).attr("data-direction"))             animation_direction_acw=($(this).attr("data-direction")=="anticlockwise");          function animatenextframe()         {             if (firstsatelite.queue().length > 2)                 return; // don't allow animation queue              // while stopping implode             if (rewind && stopping && (animation_position <= explode_size))                 ellipse_size_offset=explode_size-animation_position;              if ((animation_end_position-animation_position) <= explode_size)             {                 ellipse_size_offset=explode_size-(animation_end_position-animation_position);             }              var angle,nexx,newy;             (var i=0;i<satelites.length;i++)             {                 angle=animation_position+animation_position_offset+i*(360/satelites.length);                  if (animation_direction_acw)                     angle=-angle                  newx = offset_x + (a-ellipse_size_offset)*math.cos(angle*math.pi/180);                 newy = offset_y + (b-ellipse_size_offset)*math.sin(angle*math.pi/180);                  var newcss = {  "top": newy+"px",                                  "left": newx+"px",                                  "z-index": parseint(10+newy)                                                              }                 if (vary_size_percent)                 {                     var percent = (((100-vary_size_percent)+(newy/eclipse_height)*vary_size_percent));                     newcss["width"]  =  percent*+satelites[i].naturalwidth/100;                     newcss["height"] = percent*+satelites[i].naturalheight/100;                     newcss["top"]    = (newy+(satelites[i].naturalheight-newcss["height"])/2)+"px";                     newcss["left"]   = (newx+(satelites[i].naturalwidth-newcss["width"])/2)+"px";                 }                                                 $(satelites[i]).animate(newcss,speed);                             }              // while starting explode             if (!stopping && ellipse_size_offset>0)                  ellipse_size_offset--;               if (stopping)             {                 if (animation_position==0 || !rewind)                 {                     window.clearinterval(animationid);                     animationid=false;                 }                 else                 {                     animation_position=math.abs((animation_position-1)%360);                 }             }             else             {                 if (animation_position <= animation_end_position)                     animation_position=(animation_position+1)%360;             }         }          function startanimate()         {             stopping = false;             if (!animationid)                 animationid = setinterval(animatenextframe,speed);         }         function stopanimate()         {             stopping = true;         }          startanimate();                        animatenextframe(); // init positions     });   } })(jquery); 

it works when use <img> elements, if try use either <a> , <div> , or <p> element stays in place (as tested, positions calculated these elements, it's not reflected in css , don't know why). tried use display: inline still <img> work, nothing else. have been missing?