外部から読み込むときのjQuery fadeIn IE Pngの問題

StackOverflow https://stackoverflow.com/questions/1808015

質問

jQueryのコンテンツロードメソッドを使用して、ドメイン内の外部HTMLファイルからWebページのdivにデータをロードしています。現在のページでdivを非表示にし、新しいページをフェードインすることで、divを新しいページから取り出します。これらのdivの両方にpng画像があり、IEで恐ろしい黒い塊を作成しています。他のブラウザでは、IEが複数のフィルターを処理できないため、混乱を招きます。

ユニットpng修正を使用できませんでしたが、この移行中に私のpngをきれいに保つための修正やアイデアはありますか？

i46.tinypic.com/t9dtvr.jpgこれは問題のスクリーンショットです、乾杯

また、元のページ（新しいものを読み込む前）にあるpngは、ユニットpng修正を使用して完全にフェードインおよびフェードアウトしますが、外部ファイルからの読み込みおよび外部への読み込みは行わないことも発見しました。これらのページにも修正を追加しましたが、それも機能しません。

役に立ちましたか？

解決

この問題に対する100％の解決策はありません。 PNGの半透明領域がある場合、フィルターを適用すると、それらの領域は完全に不透明になります。私が見たほとんどのフェーディング遷移は、フェード中にフィルターを適用し、その後フィルターを削除します。これは、画像がフェードインしている間、エイリアス領域が表示されることを意味しますが、トランジションの終了時にはきれいに見えます。

別のソリューションは、ページの静的な部分に使用できます。画像の背景が静的な場合、その背景から画像を作成し、それをimgタグの背景画像として使用できます。その後、フェードインとフェードアウトがうまく機能します。 png画像が既に要素の背景画像である場合、不透明な背景画像が設定されたコンテナに配置し、代わりにフェードする必要があります。

テキストまたは動的コンテンツの前でフェードしている場合、できることはあまりありません。

編集：次のページには、古いAlphaImageLoaderフィルターと、不透明度フィルターが設定された親divに関連するソリューションがあるようです：

http://blog.mediaandme.be/?ref=17

>

他のヒント

pngの背景が透明な要素のフェードで同様の問題が発生しました。いくつかの調査の後、このページを見つけました。最後に、解決策が見つかります。それは私を助けました：

http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

ユーザーdan.telloはIEで追加のフィルター（CSS）を使用しました：

.item img {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
  zoom: 1; }

編集：絶望的だと投稿しましたが、実際に回避策を説明している人がいます。これが役立つかどうかを確認します。

http://groups.google .com / group / jquery-dev / browse_thread / thread / 1f693c5f4e8ea650 / f3bc9685ccb40e70？pli = 1 http://blogs.msdn.com/ie/archive/ 2005/04/26 / 412263.aspx

同様の問題がありました。ユーザー入力に基づいていくつかの透明なPNGの1つをページにロードし、フェードインする必要がありました。DrewDillerのBelated PNG修正（IE6向け）を使用することになりました。もちろん、ドキュメントの準備ができた状態での呼び出しは、動的コンテンツでは機能しません。そのため、私のスクリプトは次のようになります。

html = '<img src="selectedimage.png" />';
$('#overlay').html(html);
DD_belatedPNG.fix('#overlay img');
$('#overlay img').hide().fadeIn(1200);

IE7ではうまく機能していますが、IE8はまだテストしていません。

png画像（または色あせた要素）に透明以外の background-color 値を指定できますか？それはほとんどヘルスです。

@jdln-これが彼女の目的であり、間違って説明したのか、これが別の解決策であるのかはわかりませんが、これは私にとってはうまくいきました：

  1. 透明なPNGをラッパー要素に適用する
  2. ラッパー内の要素にフェードを適用します。これにより、ラッパー要素も強制的に表示されるようです。
  3. ラッパー要素を非表示にし、jQueryフェードを使用してコンテンツ要素を表示します

例：

/* HTML: */
<div id="wrapper">
    <div id="content">I use this for a drop-down menu with a transparent PNG shadow for lte IE8 browsers
    </div>
</div>

/* CSS */
#wrapper{margin-left:-9999px;}

/* jQuery */  
$('#content').hide().fadeIn();

.hide（）を使用して、ホバーイベントからこれを呼び出しているため、エフェクトが毎回最初から開始されるようにします。 これがお役に立てば幸いです！

する必要があるのは、jsファイルで要素のラッパー（スタイル）を作成して（#outer（has background png））不透明度を1.0にフェードすることです。うまくいきます！

ex：

jsファイル：

$('#style').fadeIn('slow');

cssファイル：

#style
{
    margin:0;
    background:transparent;
    float:left;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top