web-dev-qa-db-ja.com

jquery IEフェードインとフェードアウトの不透明度

IE CSSオーバーレイを使用してライトボックスに適用しています。基本的に、jqueryにはfadeinとfadeoutを使用しています-問題IEを除き、すべてが正常に機能することです。

In IE-フェードインを取得しません-むしろ、不透明度の背景にまっすぐ進みます。

フェードアウト時-1秒未満の「不透明度」を削除し、オーバーレイを削除する前にページを「単色」にレンダリングします。

誰でもこのバグを修正する方法を知っていますか？その本当に迷惑な-私はすべての正しいフィルターなどを使用していますIE？

jqueryhtmlcssinternet-exploreropacity
26
Tom

IE8でも同じ問題が発生しました。 fadeIn（）を呼び出す前にJavaScriptでDIVの不透明度を設定すると、問題が解決しました。

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

これは、透明なPNGではなくプレーンDIVのみを使用していました。

48
woodstylee

多分これはあなたにとって良い解決策でしょう（私にとってはそうです）。解決策はシンプルですが、効果的です（非常に素晴らしい）。 IEは、その親の背景に色がない場合に透明度に問題があります（完全な透明度）。

ここで行うこと（下の例を参照）は、ほとんど透明な（目に透明な）divを最初に追加することです。キャンバス/コンテナ内の最初のdiv（=> divなど）であり、絶対に配置されるため、このdivの後のすべてのコンテンツは最初のdivの上に配置され、これが他のすべてのコンテンツの背景になりますこのキャンバスの中。

現在背景が存在するため、IEは、フェードインまたはフェードアウト（不透明度を変更するとき）またはキャンバスの不透明度を以下の値に設定するときに、厄介な黒い斑点（ピクセル）または黒い領域を示しません。 100。

方法-100x100の画像の例：

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

JQueryで画像をフェードインまたはフェードアウトするには：

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

これも可能です：

$("myImage").fadeIn("slow");

それでおしまい！

嬉しいことに、このソリューションはVML/SVG（Raphael）またはアルファ透明度を持つ他のコンテンツでも機能します。また、この「ハック」は他のブラウザには影響しないため、JSコードを変更/ハッキングする必要はありません。

それが役に立てば幸い。

6
Erwinus

正確なコードがないとわかりにくいですが、IEはposition: relativeしたがって、私があなただったら、直接または親を通してフェードしようとしている要素にposition: relative適用済み。それが役に立てば幸い。

0
spirytus

@LoveMeSomeCode（stackoverflowは明らかに誰かのメッセージに応答できるのでX評判のXが必要だと思っているので、あなたの投稿に直接返信することはできません-なぜ？！？！）IE8の「互換ビュー」（はい、モード自体よりもさらに）。

私が仕事で開発しているWebサイト（IEの場合）を見ると、人々はあらゆる種類の奇妙な動作をしていることに気付きました。いろいろと遊んだ後、IE8には、すべてのローカルページが互換表示で表示されるように設定する設定があることがわかりました。ドキュメントの宣言やマークアップの厳格さに関係なく、IE8はすべてのイントラネットページに互換ビューを使用します（そして、localhostは同じだと思います）。

[ツール]> [互換表示設定]> [互換表示でイントラネットサイトを表示する]チェックボックスをオフにします。

なぜこれがデフォルトで有効になっているのか私にはわかりませんが、それを隔離して修正するように人々に伝えるのは非常に面倒です。

0
Lev

ここに、この問題に対する別の潜在的な修正があります... jQueryには、CSSを介して設定された不透明度を検出する際に、いくつかの問題（1.4よりも前）があります。不透明度（fadeIn、fadeOut、fadeTo、およびanimate）をアニメートする前にjQueryを使用して要素の不透明度を設定しても問題はないようです。同様に、CSSを使用してそれをサポートするブラウザーの不透明度を設定し、さらにその上にjQueryを使用して不透明度を設定すると、IEで適切に動作するはずです。ディスプレイなしの場合も同様です。

例：

$('#element').css("opacity","0").fadeIn("slow");

ソース： http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_

0
styol

この問題を観察した状況では、@ Erwinusで概説された方法を使用して部分的に修正することができました。その手法を使用すると、ハローのfarさがはるかに少なくなりましたが、それでも奇妙な黒いオーラが見えます。

画像自体に背景を適用できましたが、

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

そして、これは問題を完全に修正しました。条件付きコメントを介して含まれているiefix.cssファイルに貼り付けました。追加のHTMLは必要なく、他のソリューションよりも優れたフェード効果を提供しました。

これは明らかにすべての場合の解決策とは限りませんが、私の場合は実行可能であり、うまく機能しました。

0
morewry

OK、私はこれに問題があり、オンラインで見つけた解決策はどれもうまくいきませんでした。 W3Cのサイトを見ると http://www.w3schools.com/Css/css_image_transparency.asp で、IE8で機能したため、私は夢中になりました。しかし、私はそれを私の開発環境にコピーしません。

私はこのコードを持っていました：

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

そして、このマークアップ：

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

FF、Chrome、IE8のすべてで機能しました。

最終的に実現したのは、IE8がローカルホストに対して実行するときにスクリプトを適用していなかったことです。このコードをウェブホストにコピーすると、BAM！が完全に機能します。 IE8がこれを行う理由はわかりませんが、開発者がIEを嫌うもう1つの理由と考えています。

たぶんそれは私だけです。

0
LoveMeSomeCode

また、このジャンクブラウザーを使用して問題を抱えています。

ブラウザが.animate({opacity:0})を使用する代わりにIEである場合]を確認することもできます。.animate({opacity:'hide'})を使用する必要があります。

0
Jerome