0

最初は非表示になっている div 内の特定の要素で単純な fadeIn() を呼び出しています。

JavaScript:

$("#enclosingdiv").css({visibility: "visible"});
$("#element").fadeIn(1500);

問題は、フェード アニメーションの間、レンダリングによってテキストが太くなったり、別のフォントで表示されたりすることです。アニメーションが完了すると、元のフォント/フォントの太さに戻るため、「グリッチ」または「突然の切り替え」が発生します。この問題は、Chrome と IE 8 の両方で発生しました。また、不透明度を 0 から 100 にアニメーション化する animate(opacity) メソッドの実装中にも発生しました (基本的には、fadeIn() と同じ効果)。

私はかなりの量の調査を行い、多くの解決策を試しました：

  1. IE のフィルターを無効にしました (問題は IE 固有ではありませんが)。
  2. アニメーション化されている要素に背景を追加しました。
  3. -webkit-font-smoothing をアンチエイリアスに設定します (明らかな効果はありません)。
  4. 元のフォントに似ていない未知のフォントまたは太字のフォントのみを一時停止するfadeTo(0.99)を試しました。

ちなみにWindows XPです。

jsFiddle: http://jsfiddle.net/2Txk7/34/

4

1 に答える 1

2

かなりうまくいくと思われる回避策を発見しました。ただし、「グリッチ」を引き起こしているフェードイン（）の根本的な問題は解決しませんが、誰かが元の問題を解決できるまで実装することにした代替手段を提供します。

基本的に、z-index プロパティを使用してフェードインする必要がある要素の上に、背景に一致する画像のオーバーレイを適用しました。そのため、テキストをフェードインさせる代わりに、下にあるテキストを明らかにするために、より高い z-index を実装した fadeOut() を持つ画像を用意しました。下記参照：

#background {
position: absolute;
background-image: url(../images/background.jpg);
width: 100%;
height: 100%;
z-index: 1;
}
#text {
position: absolute;
left: 300px;
top: 100px;
z-index: 2;
}

$("#background").fadeOut(1500);

ほとんどのブラウザは、テキストに対して同じ機能を実行する場合と比較して、グラフィックのフェードまたは不透明度をより適切に処理しているようです。

繰り返しますが、これが理想的な解決策だとは思いませんが、同じ結果を達成するものです。

于 2013-01-24T19:52:37.240 に答える