Firefox 中的 JQuery 动画口吃答案

【问题标题】：JQuery Animation stutter in FirefoxFirefox 中的 JQuery 动画口吃
【发布时间】：2012-05-27 01:58:49
【问题描述】：

我目前正在制作我的第一个网站，并且正在使用 JQuery 制作动画。动画在 IE 中非常流畅，但在 Firefox 中则严重卡顿。该网站是www.chiahaoyang.com。我花了无数个小时试图将其修复为不可用。谢谢！

UPDATE1：JQuery 加载/动画代码为：

    function ajaxLoad(input){
        contentBox.fadeIn();
        content.fadeOut("medium",function() {
            content.load("ajax_pages/"+input+".html", function(){
                var contentHeight = content.height();
                if(contentHeight > screen.height*0.66){
                    contentBox.animate({height: screen.height*0.66},"slow",function(){
                        content.delay(500).fadeIn("slow");
                    });
                } else {
                    contentBox.animate({height: contentHeight},"slow",function(){
                        content.delay(500).fadeIn("slow");
                    });             
                }
            });
        });
    };

content 是我加载 ajax 页面的 div。 contentBox 是包含内容的div

更新 2：不稳定的来源是一些 css3 属性：

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);  
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);

这些增强功能给浏览器增加了负载是有道理的，但有什么办法可以绕过它，让 Firefox 像 IE 一样流畅地渲染它？

更新 3：好的，我刚刚将上面的代码替换为：

-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15);

现在流畅多了……

【问题讨论】：

我认为这与计算机的显卡和处理能力有关，以及浏览器如何呈现页面。
我点击了“resume”，执行 GET 需要 6.21 秒...您需要改进显示内容的方法！
@nhahtdh 我非常怀疑这是问题所在。动画在 IE 中非常流畅，在 Firefox 中则不然。
@Zuul 简历内容其实都是scribd处理的……不过我正在考虑改一下。
@DannyYang：根据浏览器的优化方式，性能（和内存使用）可能会有所不同。

标签： jquery firefox animation

【解决方案1】：

这个问题对我来说很烦人，我也在设计我的网站，我必须降低 box-shadow 效果才能让 firefox 正常运行，更不用说 jquery 元素......那些甚至无法运行如果有太多的盒子阴影效果。如果我使用 IE，我不明白为什么这不会发生，我的网站在上面运行流畅。显然这里发生了一些事情，请有人给我们一些帮助:) 谢谢。

【讨论】：