私はIE8で問題を抱えて壁に頭をぶつけています。私はjQueryでfadeIn関数を使用してサイトのコンテンツをフェードインさせています。これは他のブラウザでも問題なく動作しますが、IE8でfadeInが終了すると、フォントのアンチエイリアスが変化し、IE8でjQuery.fadeInのフォントのアンチエイリアスの問題？
http://www.ipulse.bizにサイトが表示されます。フェードインを引き起こすために使用しているコードは、以下のように非常に単純です。
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
コードはsetInterval関数によって呼び出され、違いがあれば意味を持ちます。
これは、Internet ExplorerでClearTypeが表示されなくなったために発生します。これは非常に面倒です。
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
これはjqueryプラグインに限定されません。 IEで不透明度が使用されると、半透明部分でアンチエイリアスが失われます –
そうです。しかし、PhilipはJQueryを使用しているため、JQueryのソリューションとのリンクが良好であると感じました。 –
残念ながら、私はすでにこのソリューションを試してきましたが、うまくいかないようです。実際、IE8に加えてIE7でも問題が発生しています（これは以前には起こりませんでした）。 –
フェード効果が完了した後に、それが呼ばれる必要がある（などの後に例えば500ミリ秒）
私は私の答えは遅すぎるビットが来るが、どのようにのthinkin'その逆について知っていますか？ IE7/IE8は、色あせたテキストのアンチエイリアスを保持しないので、単一の背景色（黒など）を使用している場合は空のdiv、背景色を作成できます。位置：絶対;表示ブロック;それをテキストエレメントの上に置きます。
テキストのFadeInエフェクトが必要な場合は、FadeOutをその上の「黒い」レイヤーに適用するだけで、その逆も同様です。
このようにして、テキストアンチエイリアスはそのまま維持されます。
これは先に説明したように、これはInternet ExplorerのCleartypeによって発生しますが、少なくともこの問題を許容できるようにする回避策があります。
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
これは、IEが透過性をクリアしてテキストを通常通りレンダリングするはずです。
まだ残念ながら、それほど美しくはありません。
+1アニメーションが完了したら十分に機能します。 – easwee
申し訳ありませんが、私はこの問題を抱えていましたが、このトピックに遭遇したときに解決策を探していました。私はこのトピックで実用的な解決策を見つけられませんでしたが、問題を完全に解決するような単純な解決策を思いつきました。
使用に代えて：
$（ 'エレメント '）フェードイン（500）
使用fadeToを99％までフェード：
$（'。エレメント'）fadeTo （500、0.99）
1％の違いは表示されず、100％の不透明度に達しないため、IEはクリアタイプを適用していないようです。
これが他の誰のためにも機能するかどうかを教えてください。
興味深いが、元の質問が求めていたのとは全く反対である。 cleartypeを適用する必要があり、削除する必要はありません。 – Joshua
Iが必要なテキスト
フィルタのCSSに追加することによってこれを修正：アルファ（不透明度= 99）。
これは、つまり、私はまだie7の小さな変化を得るが、それは例外である。
は、あなたはそれがここにhttp://thriive.com.au/
作業その問題の準備ができて解決策を見つけた見ることができます。オーバーレイとしてあなたのDOM上の別のDIVを作成し、これが唯一のDIVであなたのフェード機能を実行します。
は、私は解決策を持っています。コンテンツがフェードイン/フェードしているかのように表示されます。このアプローチは、複数の要素の代わりに単一のDIVだけをフェードさせるので、より効果的です。次に例を示します。
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
私はまた、透過PNGの色あせたエリアの中に問題があったが、退色しながら、CSSのほんの少しで画像の黒「国境」をフィルタ属性を除去するための上記のJSを組み合わせること消えていました。
は、CSSスプライトを使用する要素だったので、私は、CSSで私のスプライトのクラスにこれを追加する必要がありました私の場合です：
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}
私はjQueryのを使用していないが、私はハーフ以下のCSSを使用してこの問題を解決：
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
完全に不透明なテキストがアンチエイリアスですが、半透明ではありません。しかし、半透明のテキストではそれほど大きな問題ではありません。
あなたのサイトで回答を使用したことは本当に上品ですが、回答は受け付けていません。さあ、数秒間コミュニティに戻ってください。 –