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/我只是在IETester的IE7上运行它也非常快，我认为IE7的JS实现也比FF慢得多。

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

下拉的jQuery动画是生涩，缓慢和无响应

1 个答案: