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

我在下拉菜单上有一些相当简单的动画，它看起来非常急促，而且经常变得毫无反应。它出现在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>

---

有人能提供一些建议吗？

删除映像是否会提高性能？使用较旧的浏览器，像这样渲染运动中的图像可能会成为一个瓶颈。有没有一种方法可以尝试将其作为CSS背景图像？虽然它的名字像是light down arrow，但我猜它不是一张很大的图片

编辑：在这里通过JSFIDLE运行，我也在IE7的IETester中运行过，而且速度也非常快，我认为IE7的JS实现也比FF慢得多

---

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

好主意。然而，图像本身在触发动画的链接中，它本身没有动画，并且根本不会移动/褪色-在这种情况下，您的答案仍然适用吗？在所有浏览器中都很慢，还是有一个特别的？FF/IE。。。Chrome看起来不错，但在Javascript性能方面又领先了很多