轨道<img/>元素有效，但不是<div>元素，为什么？</div>

Question

我正在尝试创建一个效果，其中一些元素使用jQuery在中心元素周围运行。我已经为此更改了现有代码，但它部分有效。

我的HTML代码：

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

改变的javascript代码是：

(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 a = 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 to queue up

            // 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;
            for (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);

我使用<img>元素时效果很好，但如果我尝试使用<a>，<div>或<p>，则元素保持不变（正如我测试的那样） ，这些元素的位置是计算的，但它没有反映在CSS中，我不知道为什么）。我尝试使用display: inline，但仍然只有<img>工作，没有别的。我错过了什么？