0

IE8 で jquery を使用して特定の要素の不透明度を設定する際に問題が発生しており、私の人生ではそれを理解できません。

この例を参照してください: Jsfiddle

<div class="container">

<div id="output" class="output">
    <p>Output is: <span></span></p>
</div>

<div id="output2" class="output">
    <p>Output is: <span></span></p>
</div>

<span id="output3" class="output">
    <p>Output is: <span></span></p>
</span>

</div>​

.container {
    height: 2000px;
    width: 400px;
}

.output {
    position: fixed;
    top: 100px;
    left: 30px;
    color: white;
    font-size: 16px;
    z-index: 9999;
    background: red;
    padding: 10px;
}

#output2 {
    top: 150px;
}

#output3 {
    top: 200px;
}

$(window).scroll(function() {


if($(window).scrollTop() >= 0)
   {     
       var theValue = (1-($(window).scrollTop()-0)/1000);
       $("#output p span").css('opacity', theValue);
       $("#output2 p").css('opacity', theValue);
       $("#output3").css('opacity', theValue);
       $("#output p span").html(theValue); // DEBUG OUTPUT
       $("#output2 p span").html(theValue); // DEBUG OUTPUT
       $("#output3 p span").html(theValue); // DEBUG OUTPUT

}
});​

例1では、インナー<span>は色あせしません。

例 2 は、コンテナー要素のフェードが正しく機能することを示しています。

要素の問題である可能性があると想定しましたがinline、例 3 はそうではないことを示しています。

3 つの例はすべて、IE7 と IE9 では正しく動作しますが、IE8 では正しく動作しません。

誰でもこれを説明できますか？抜く髪がなくなってきた！

4

2 に答える 2

1

編集:

あなたの問題を手に入れました、

これspanはブロック要素ではありません。だからopacity、それに適用されていません。or要素にしblockます。inline-blcok

次のようにコードを最小化します。

$(window).scroll(function() {
    if($(window).scrollTop() >= 0) {     
        var theValue = (1-($(window).scrollTop()-0)/1000);
        $("#output p span, #output2 p, #output3").css("opacity", theValue);       
        $("#output p span, #output2 p span, #output3 p span").html(theValue); // DEBUG OUTPUT
    }
});

そして、次の CSS を追加します。

.output p span { display:inline-block }

それは完全に機能しています。デモを見る

于 2012-09-06T10:53:03.733 に答える
0

IE は不透明度を使用せず、フィルターを使用します。詳しくはこちらをご覧ください http://www.quirksmode.org/css/opacity.html

一部の jquery アニメーションは、これを自動的に処理します。例えば：

試す

 $("#output p span").fadeTo(1, theValue);
 $("#output2 p").fadeTo(1, theValue);
 $("#output3").fadeTo(1, theValue);
于 2012-09-06T10:52:36.833 に答える