Этот javascript работает медленно в Firefox, как я могу заставить его работать гладко?

Question

У меня есть меню, которое использует немного javascript для хорошего эффекта.Эффект парения плавно работает в Google Chrome, Safari и даже Internet Explorer.

Я пытался удалить изображения, но этого не произошло.Я попытался отключить

Вот код 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);
});});`

Вот 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>

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

Любая идеячто вызывает глюки в Firefox?

Answer 1

Моим первым предположением будет просто число цепочек коллированных или селекторов.Я хотел бы скачать бесплатную версию Dynatrace Ajax.Он скажет вам точно, где время проведено.Я предполагаю, что маршалинг из JavaScript обратно в дом со всеми связанными вызовами.Или это может быть время рендеринга, но dynatrace прекрасно его сузит.

Answer 2

Проблема была с базовыми изображениями. Я изменил их на divs и установил их в качестве фона, и это работало как очарование. Понятия не имею, почему Firefox имеет такую ​​проблему с отображением в моем javascript, а затем сделал.