3

私は現在、最初の Web サイトを作成しており、アニメーションに 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

この問題は私にとって非常に厄介です。私は自分のサイトも設計しており、jquery要素は言うまでもなく、Firefoxが適切に実行するにはボックスシャドウ効果を下げる必要があります...それらがある場合でも実行できませんボックス シャドウ効果が多すぎます。IE を使用している場合、これが発生しない理由がわかりません。サイトは水のようにスムーズに実行されます。明らかにここで何かが起こっています。誰か助けてください:)ありがとう。

于 2012-05-30T15:05:20.473 に答える