下拉菜单上的jQuery动画是生涩，缓慢且无响应

我在下拉菜单上看到一些相当简单的动画，这似乎让很多人感到非常地不熟，而且经常变得没有反应。它发生在Firefox和Internet Explorer中。下拉菜单上的jQuery动画是生涩，缓慢且无响应

使用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>

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

来源

2011-02-10 Chris

移除图像是否改善性能？使用较旧的浏览器呈现图像“动起来”就像可以成为瓶颈一样。有没有一种方法可以将它作为CSS背景图像来尝试？虽然有一个像“轻箭头”这样的名字，但我猜这不是一个很大的图像。

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

这是什么样的内容下降，如果有的话？这可能是我在测试中缺少的部分。

来源

2011-02-10 16:54:34

好主意。然而，图像本身在触发动画的链接之内，它本身没有动画，并且根本不移动/淡入 - 您的答案在给定情况下仍然适用吗？ – Chris 2011-02-10 16:57:35

下拉菜单上的jQuery动画是生涩，缓慢且无响应

回答

相关问题