この例のテキストは、フェードアウトする前に少し右に移動し、フェードインした後に左に修正します。この効果は、Chrome (バージョン 26.0.1410.64 m) を使用した XP(SP3) でのみ見られます。Windows7 上の同じバージョンの Chrome では、この動作は見られません。
私が見つけた唯一の解決策は、フェードを開始する前に太字フォントを通常にリセットすることですが、これもあまり見栄えがよくありません。
これは大きなコードの一部であり、css ではなく JavaScript ソリューションを探しています。
ありがとう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fade moves text horizontally in Chrome with Windows XP</title>
<style type="text/css">
body {font-family: Arial; font-size:12px; font-weight:bold;}
</style>
<script type="text/javascript">
function setOpacity(id,level) {
var a = document.getElementById(id);
if(a) {
a.style.opacity = level;
}
}
var duration = 1000;
var steps = 22;
function fadeIn(id){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity('" + id + "'," + i + ")", i * duration);
}
}
function fadeOut(id) {
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity('" + id + "'," + (1 - i) + ")", i * duration);
}
}
</script>
</head>
<body>
<div id="fade">
This text moves slightly to the right before fading out and resets itself back to the left after fading back in.
<br />
This text moves slightly to the right before fading out and resets itself back to the left after fading back in.
</div>
<p onclick="fadeOut('fade')">Click to fade out</p>
<p onclick="fadeIn('fade')">Click to fade in</p>
</body>
</html>