Question

我目前正在创建我的第一个网站，而我正在使用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);

现在它更加顺畅......

Answer 1

这个问题对我来说非常烦人，我也在设计我的网站，我必须降低firefox的盒子阴影效果才能正常运行它，更不用说jquery元素......那些可以＆＃39 ;如果有太多的盒子阴影效果，甚至可以运行。我不明白为什么如果我使用IE浏览器不会发生这种情况，我的网站就像水一样流畅。显然这里有一些事情，请有人给我们一些帮助:)谢谢。

Firefox中的JQuery Animation口吃

1 个答案: