3

我目前正在制作我的第一个网站，并且正在使用 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);

现在流畅了很多...

4

1 回答 1

1

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

于 2012-05-30T15:05:20.473 回答