下拉菜单上的 jQuery 动画不稳定、缓慢且无响应

Question

我在下拉菜单上有一些相当简单的动画，它似乎非常剧烈，并且经常变得无响应。它出现在 Firefox 和 Internet Explorer 中。

使用的 jQuery 代码：

$(".optionslink").hover(function() { 
        $(".dropdown").stop(true,true);

        $(".dropdown").animate({opacity: 100, top: '30px'},200);
        $(".optionslink").css("background-color","#444");
    }, function() { 
        $(".dropdown").animate({top: -$(".dropdown").height(), opacity: 0}, 400);
        $(".optionslink").css("background-color","transparent");
    }
);

HTML：

<div class="optionslink" style="background-color: transparent;">                                
    <a class="optionslinka" href="">Options <img alt="" src="/web/resources/graphics/lightdownarrow.gif"></a>
    <div class="dropdown" style="opacity: 0; top: -86px;">  
        Drop down text / links here                         
    </div>                          
</div>

任何人都可以提供一些建议吗？

Answer 1

删除图像会提高性能吗？对于较旧的浏览器，像这样渲染“运动”图像可能会成为瓶颈。有什么方法可以尝试将其作为 CSS 背景图片吗？尽管名称为“轻向下箭头”，但我猜它不是一个很大的图像。

编辑：通过jsfiddle在这里运行它 http://jsfiddle.net/J7QuV/ 我刚刚在 IE7 上运行它IETester 也是如此，它也非常快，我认为 IE7 的 JS 实现也比 FF 慢得多。

如果有的话，这会掉落什么样的内容？这可能是我在测试中遗漏的部分。