1

私はFirefoxとIE8の両方で自分のWebサイトを開発してきました。メインページ（および写真と描画のセクション）に画像ホバー効果があります。http://www.dgendill.comのソースでコードを確認できます。Firefoxでは、効果は完璧に機能します。IE 8では機能しますが、はるかに低速です。これが私が速度を改善しようとしたことです：

  1. 最適化されたjQueryライブラリを使用

  2. jQueryがDOMをトラバースする範囲を狭めました。例えば：

    $(".sectionLink","#divLandingPage").hover(
    function(){
        $(this).addClass("hover");
        $(this).fadeTo(100,.8);
    },
    function(){
        $(this).removeClass("hover");
        $(this).fadeTo(100,.99);
    }
);

  3. 画像の表示タイプを変えてみました。ブロック、インラインブロック、およびインラインを表示します。

IE 8が非常に遅い理由はありますか？私のHTMLは有効な4.01です。

同じ問題に取り組んでいる人は次のとおりです：http： //mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/

IEでホバー効果を無効にすることにしました。

if(jQuery.support.opacity) {
    $(".sectionLink","#divLandingPage").hover(
        function(){
            $(this).addClass("hover");
            $(this).fadeTo(100,.8);
    },
        function(){
            $(this).removeClass("hover");
            $(this).fadeTo(100,.99);
    }
    );
}
4

2 に答える 2

0

position要素に CSS属性が適用されている場合、すべてのバージョンの IE で jQuery のアニメーション効果に問題があることがわかりました。通常、属性を適用せずに要素を div でラップpositionすると、問題が修正されます。詳細については、jQuery slideToggle および Internet Explorer を参照してください。

于 2009-12-08T21:43:09.760 に答える
0 
    $(".sectionLink img").hover(function(){ 
        $(this).addClass("hover").fadeTo(100,.8);
    }, function(){ 
        $(this).removeClass("hover").fadeTo(100,.99); 
    });

イベントハンドラーを画像に直接アタッチするか、これで問題が解決しない場合は、アニメーション メソッドを試してください。考えられる理由として、IE が CSS プロパティとして不透明度をサポートしていないことが考えられます。

コードをチェーンする必要があります。

コンテンツがダウンロードされてレンダリングされると、load() イベントがトリガーされます。ready() イベントは、ドキュメントの作業/操作の準備が整ったときにトリガーされます。

于 2009-12-08T20:41:50.687 に答える