1

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

ユニット png 修正を使用してみましたが、役に立ちませんでした。この移行中に私の png の見栄えを良くするための修正やアイデアはありますか?

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

また、元のページ (新しいものをロードする前) にある png は、ユニットの png 修正を使用して完全にフェードインおよびフェードアウトしますが、外部ファイルからロードしてからバックアウトすることはありません。それらのページにも修正を追加しましたが、それも機能しません。

4

7 に答える 7

6

問題に 100% の解決策はありません。PNG の半透明な領域がある場合、適用されたフィルタはそれらの領域を完全に不透明にします。私が見たほとんどのフェード トランジションは、フェード中にフィルターを適用し、その後フィルターを削除します。これは、イメージがフェード インする間、エイリアス領域が表示されることを意味しますが、トランジションの最後には問題なく表示されます。

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

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

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

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

于 2009-11-27T11:02:03.940 に答える
3

透明な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; }
于 2012-10-09T12:05:14.630 に答える
2

編集：私はそれが絶望的であると投稿するようになりましたが、実際には回避策を説明している人がいます. これが役立つかどうかを確認してください：

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

于 2009-11-27T11:54:49.480 に答える
1

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

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

IE7 では問題なく動作していますが、IE8 ではまだテストしていません。

于 2010-08-29T20:30:21.140 に答える
0

@jdln -- I'm not sure if this is what she was going for and explained it wrong, or if this is another solution, however this worked for me:

  1. Apply the transparent PNG to a wrapper element
  2. Apply your fade to an element INSIDE the wrapper. This seems to force the wrapper element to display as well.
  3. Hide the wrapper element, show the content element using jQuery fade

For example:

/* 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();

I use .hide() to make sure that the effect starts from the beginning every time, as I'm calling this from a hover event. Hope this helped!

于 2011-02-23T18:36:52.957 に答える
0

PNG 画像 (または色あせた要素) にbackground-color透明以外の値を指定できますか? それはほとんどヘルシーです。

于 2009-11-27T10:56:46.960 に答える
-1

あなたがしなければならないのは、要素（#outer（背景pngを持っています））の周りのラッパー（スタイル）を作成することだけです.jsファイルで不透明度を1.0にフェードします。よく働く！

元：

js ファイル:

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

css ファイル:

#style
{
    margin:0;
    background:transparent;
    float:left;
}
于 2010-03-20T15:35:13.403 に答える