This javascript runs slowly in Firefox, how can I make it run smoothly?

I've got a menubar that uses a bit of javascript for a nice effect. The hover effect runs smoothly in google chrome, safari and even internet explorer.

I've tried removing the images, that doesn't seem to do it. I tried disable

Here's the javascript:

$(function(开发者_开发百科) {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
     .stop(true)
     .animate({
        'width':'181px',
        'height':'181px',
        'left':'0px'
     },250,'easeOutBack')
     .andSelf()
     .find('.sdt_wrap')
     .stop(true)
     .animate({'top':'140px'},350,'easeOutBack')
     .andSelf()
     .find('.sdt_active')
     .stop(true)
     .animate({'height':'171px'},250,function(){
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length){
        var left = '181px';
        if($elem.parent().children().length == $elem.index()+1)
            left = '-181px';
        $sub_menu.show().animate({'left':left},200);
    }
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
    $sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
     .stop(true)
     .animate({'height':'0px'},300)
     .andSelf().find('img')
     .stop(true)
     .animate({
        'width':'0px',
        'height':'0px',
        'left':'85px'},400)
     .andSelf()
     .find('.sdt_wrap')
     .stop(true)
     .animate({'top':'25px'},500);
});});`

Here's the html:

<ul id="sdt_menu" class="sdt_menu">
    <li>
        <a href="#">
            <img src="images/1.jpg" alt=""/>
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
                <span class="sdt_link">Portfolio</span>
                <span class="sdt_descr">My work</span>
            </span>
        </a>
        <div class="sdt_box">
            <a href="#">Websites</a>
            <a href="#">Illustrations</a>
            <a href="#">Photography</a>
        </div>
    </li>
    ...
</ul>

and the css:

ul.sdt_menu {
 list-style:none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:14px;
 width:1020px;
 margin:0;
 padding:0
}

ul.sdt_menu a {
 text-decoration:none;
 outline:none
}

ul.sdt_menu li {
 -webkit-box-shadow:1px -1px 0 #000;
 -moz-box-shadow:1px -1px 0 #000;
 box-shadow:1px -1px 0 #000;
 float:left;
 width:180px;
 height:85px;
 position:relative;
 cursor:pointer;
 background:rgba(0,0,0,.6)
}

ul.sdt_menu li > a {
 position:absolute;
 top:0;
 left:0;
 width:180px;
 height:85px;
 z-index:110;
 -moz-box-shadow:0 0 1px #000 inset;
 -webkit-box-shadow:0 0 1px #000 inset;
 box-shadow:0 0 1px #000 inset
}

ul.sdt_menu li a img {
 border:none;
 position:absolute;
 width:0;
 height:0;
 bottom:0;
 left:85px;
 z-index:300;
 -moz-box-shadow:0 0 4px #000;
 -webkit-box-shadow:0 0 4px #000;
 box-shadow:0 0 4px #000}

ul.sdt_menu li span.sdt_wrap {
 font-weight:100;
 position:absolute;
 top:25px;
 left:0;
 width:180px;
 height:60px;
 z-index:215
}

ul.sdt_menu li span.sdt_active {
 position:absolute;
 background:#181818;
 top:85px;
 width:181px;
 height:0;
 left:0;
 z-index:214;
 -moz-box-shadow:0 0 9px #000 inset;
 -webkit-box-shadow:0 0 9px #000 inset;
 box-shadow:0 0 9px #000 inset
}

ul.sdt_menu li span span.sdt_link,ul.sdt_menu li span span.sdt_descr,ul.sdt_menu li div.sdt_box a {
 margin-left:15px;
 text-shadow:1px 1px 1px #000
}

ul.sdt_menu li span span.sdt_link {
 color:#fff;
 font-size:24px;
 float:left;
 clear:both
}

ul.sdt_menu li span span.sdt_descr {
 color:#0B75AF;
 float:left;
 clear:both;
 width:155px;
 font-size:13px;
 letter-spacing:1px
}

ul.sdt_menu li div.sdt_box {
 position:absolute;
 width:181px;
 overflow:hidden;
 height:171px;
 top:85px;
 left:0;
 display:none;
 background:rgba(10,10,10,.85);
 z-index:103;
 border-right:1px #000 solid
}

ul.sdt_menu li div.sdt_box a {
 float:left;
 clear:both;
 line-height:30px;
 color:#0B75AF
}

ul.sdt_menu li div.sdt_box a:first-child {
 margin-top:15px
}

ul.sdt_menu li div.sdt_box a:hover {
 color:#fff
}

Any idea what's causing the glitchyess in Firefox?

---

My first guess would be the sheer number of chained called or the selectors. I would download the free dynatrace Ajax edition. It will tell you exactly where the time is spent. My guess is the marshaling from JavaScript to the dom back with all of the chained calls. Or it could be the render time, but dynatrace will narrow it down perfectly.

---

The problem was with underlying images. I changed them to divs and set them as backgrounds and it worked like a charm. No idea why Firefox has such a problem displaying under my javascript then is did .