这个javascript在Firefox中运行缓慢，我如何才能使它平稳运行？

我有一个菜单栏，它使用了一点javascript来获得一个很好的效果。悬停效果在谷歌浏览器、safari甚至IE浏览器中都能顺利运行

我尝试过删除这些图像，但似乎没有成功。我试过禁用

下面是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>

---

你知道是什么原因导致Firefox出现故障吗？

我的第一个猜测是被调用的链锁或选择器的数量。我会下载免费的DynatraceAJAX版本。它会准确地告诉你时间花在哪里。我猜是从JavaScript到dom的封送以及所有链接调用。也可能是渲染时间，但dynatrace会将其完美地缩小。

问题在于底层图像。我把它们改成了div，并把它们作为背景，效果很好。我不知道为什么Firefox在我的javascript下显示时会出现这样的问题，但我做到了。

噢，javascript，对不起。等等我会修好的。@jackson我肯定那里有很多梅努巴枫树。只要一次谷歌搜索，你就可以得到你想要的东西，只需稍加修改。。你发布的代码太可怕了。我认为你滥用了链选择。另外，在加载时运行此代码也是一个好主意。因为您试图在渲染代码之前设置动画，所以这会减慢速度。我要做的另一件事是将其包装在$（document）.ready（）中，这仅仅是因为它所做的工作量。使Dom有机会完成.Update。我将其剥离，使菜单栏成为页面上唯一的元素，并且运行平稳。我认为问题在于菜单下面的图像，它们正在减慢速度。这是我添加的闪亮渐变，让菜单有一点深度，下面是图像滑块。如果我删除这两个项目，它运行平稳。知道为什么吗？Chrome和Safari完美呈现了这一点！链接电话本身并不是一件坏事；事实上，这是一个非常好的主意，因为它省去了库反复搜索DOM的麻烦。当然不是，流畅的调用非常好。如果你不小心的话，电话的数量可能是个问题。我不得不同意，通常情况下，它们是一件好事，但我以前从未见过这么多电话被锁在一起……谢谢。我不知道如何优化我的javascript。我只是把它写下来，直到它起作用，现在我必须学会把它瘦一点。有什么建议吗？Jackson，老实说javascript性能是个大话题。但在隧道的尽头是光明的。如果你看看Steve Souders或dynaTrace的博客，它会给你一个好的开始。您要查看的内容是封送回dom的次数以及正在使用的选择器。这些可能非常昂贵。一般来说，动画是一项代价高昂的操作，因为它必须进行大量dom操作才能看起来很好。我认为，如果你看一看任何一个好的分析器（dynatrace），你会得到一些更好的见解。

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
}