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

Question

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?

Answer 1

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 .