0

此示例中的文本在淡出之前略微向右移动，并在淡入后向左修正。我只在 XP(SP3) 上使用 Chrome（版本 26.0.1410.64 m）看到这种效果。Windows7 上相同版本的 Chrome 不会出现这种行为。

我能找到的唯一解决方案是在开始淡入淡出之前将粗体字体重置为正常字体，但这看起来也不太好。

这是一些较大代码的一部分，我正在寻找 JavaScript 解决方案而不是 css。

谢谢。

<!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>
4

0 回答 0