1

重複の可能性:
IE8 jQuery サイクルで画像が消える

ページの背景画像を表示するために、入れ子になった要素のセットをフェードインおよびフェードアウトしています。ネストされた div/article 要素にはアルファ チャネルの不透明度が与えられており、これは IE の半透明の png でオーバーライドされます。

フェードインとフェードアウトは、FF、Chrome、ie6 (はい、ie6!!!)、ie7、ie9 では正常に機能しますが、残念ながら ie8 では機能しません。

HTML:

<div id="wrapper">
   <div id="limiter">
      <div id="mainContent" class="cornerRadius10 alpha40Black">
         <header class="cornerRadius6 alpha50Black">
            <h1>Title Here</h1>
         </header>
         <article class="contentArticle cornerRadius6 alpha50Black">
            Content here.
         </article>
         <article class="contentArticle cornerRadius6 alpha50Black">
            More content here.
         </article>
      </div>
   </div>
</div>

CSS:

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5)
}

jQuery:

 $('#wrapper').children().animate({
    opacity: 0
 }, 2000 );

 setTimeout(function() {
    $('#wrapper').css('visibility' , 'hidden');
 }, 2000);

私もこのjQueryを試しました：

    $('#limiter').children().fadeOut( 2000 );

上記の任意の組み合わせは、ie8 を除くすべてのブラウザーで機能します。ラッピングする親要素にフェードアウトまたはフェードイン機能を適用しようとすると、一時停止 (フェードアニメーションが設定されている時間の長さ) が発生し、フェードしたい要素が即座に消えます。フェード効果。

私はこれに数日間取り組み、解決策と可能な修正/回避策についてGoogleを使い果たしましたが、何も近づいていません.

誰にもアイデアはありますか？

よろしく、マット。

編集：

この問題のデバッグである程度の進歩を遂げました。

半透明の背景への参照をすべて削除し、jQuery のフェード アニメーションを適用して、背景が実際の問題を隠していないことを確認しようとしました。

興味深いことに、半透明の背景が適用されていなくても (完全に不透明な背景でもテストされています)、フェード アニメーションは機能しません。全く同じ症状。だから私は簡単な検索を行い、jQuery Bug Tracker でこれを見つけました: ie8 の内部 div でフェードが機能しない

このページのコメントに従って、私filter: inherit;は子コンテナに適用しましたが、これが違いを生みました。現在、コンテンツ (テキストと画像) はフェード インとフェード アウトしていますが、背景 (不透明または (半) 透明) はそうではありません。遅延の間は変更されず、非表示または表示にスナップします。

この回避策を進める方法について何か考えがある人はいますか?

編集：

ie9でテストされ、問題なく動作します。このバグは ie8 のみに関連しています。

ありがとう、マット。

4

2 に答える 2

0

これがあなたの問題かどうかはわかりませんが、背景の設定が間違っていると思います：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}

background同時に複数の値を設定するために使用されるショートカット プロパティです。行っているようにサブ値を除外すると、他の値がリセットされます。代わりに、個々の背景プロパティを使用する必要があります。

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background-color: rgb(0, 0, 0);
    background-image: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background-color: rgba(0, 0, 0, 0.4)
}
于 2012-04-18T13:32:35.570 に答える
0

あなたのcssでこれを試してください：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.4);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=40);
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);
}

他のブラウザで他に問題がなければ、これでうまくいくはずです...もちろん、それに応じてjqueryを更新する必要があります

編集：

jQuery:
$('#wrapper').children().animate({
    opacity: 0.4,
    filter: 'alpha(opacity=40)'
 }, 2000 );

これは、不透明度が 0.4 からアニメーション化されるサンプル jquery です。ページの読み込み後に標準の不透明度が必要な場合は、jquery of curse は必要ありませんが、1 つのトリガーされたイベントで en 要素の不透明度を変更する必要がある場合は、jquery を使用する必要があります。

編集：

あなたの質問が正しければ、jsFiddleで解決策を作成しました。ただし、古いIEバージョンではテストできません。うまくいくことを願っています:)

于 2012-04-17T22:04:13.053 に答える