问JS淡出效果不起作用(for循环)

EN

我可以看到这个函数有两个问题。

首先，您的if语句都执行赋值而不是比较。您说的是if (n=0) (one =，assignment)，而您应该说的是if (n===0) (三个===，比较，或者您可以使用两个==进行类型转换比较)。

其次，使用for循环反复更改样式不会逐渐消失，因为浏览器不会在代码执行的同时更新显示-本质上，它对显示和JavaScript使用相同的线程。因此，该页面将在函数退出后更新。您需要在每次迭代后通过使用setTimeout()给浏览器一个更新的机会-类似于：

function fadeEffect(element,startValue,target,delay){
   element.style.opacity = startValue;
   if (startValue < target)
      startValue = Math.min(startValue + 0.1, target);
   else
      startValue = Math.max(startValue - 0.1, target);

   if (startValue != target)
      setTimeout(function(){fadeEffect(element,startValue,target,delay);}, delay);
}

<div onMouseOver="fadeEffect(this, 1, 0, 100);"
     onMouseOut="fadeEffect(this, 0, 1, 100);" id="box">Menu</div>

演示：http://jsfiddle.net/hLQ6y/2/

编辑:请注意，如果您太快地将鼠标移入移出，即如果您在淡出完成之前触发淡入，则此代码不能很好地处理所有这些问题。(您可以在我的jsfiddle中看到我的意思。)您可以通过保存从.setTimeout()返回的结果并在需要时调用.clearTimeout()来解决此问题。鉴于我已经涵盖了问题的本质，我将把微调留给读者作为练习……

更新:您更新的代码引入了具有相同赋值而不是比较问题的新if语句。此外，它永远调用setTimeout() -你应该有条件地这样做，就像我给出的答案中提到的那样。此外，您似乎依赖于变量i，它作为局部变量，不会在调用之间保留其值-您可以将其设置为全局变量，但更好的做法是将其作为参数进行管理，或者作为外部函数中的局部变量进行管理。

问题是，在浏览器更新显示之前，对样式的所有这些更改都会发生。您需要做的是使用"setTimeout()“在很长很长的一段时间内对更改进行间隔。

function fadeIn() {
  function increment() {
    box.style.opacity = Math.min(1.0, (opacity += 0.1));
    if (opacity < 1.0) {
      setTimeout(increment, 100);
    }
  }
  var box = document.getElementById('box'), opacity = 0;
  box.style.opacity = opacity;
  setTimeout(increment, 100);
}

edit - Here是一个要演示的jsfiddle。

如果你想让它淡出，你需要创建一个函数来设置不透明度-0.1或+0.1，然后在100ms (或更少)内用setTimeout调用它自己。如果你不让脚本等待，它会太快，并立即设置不透明度为1.0。

无论如何，使用jQuery可以更轻松地完成这项工作。