JS 淡入淡出效果不起作用（for 循环）答案

【问题标题】：A JS fade effect doesn't work (for loop)JS 淡入淡出效果不起作用（for 循环）
【发布时间】：2012-01-29 06:01:53
【问题描述】：

我尝试使用 setTimeout() 函数做一个 JS 淡入淡出效果，它似乎在某种程度上可以工作，但我似乎无法弄清楚下面的代码有什么问题：

<html>
<head>
<title></title>
<script type="text/javascript">
function FadeEffect(n)
{
    var i=1;
    fade = document.getElementById("box");
    if (n===1)
    {
        fade.style.opacity=i/10;
        i++;
        setTimeout("FadeEffect(1)",50);
        if (fade.style.opacity=1)
        {
         var i=1;
        }
    }
    else if (n===0)
    {
        fade.style.opacity=1-i/10;
        i++;
        setTimeout("FadeEffect(0)",50);
        if (fade.style.opacity=0)
        {
        var i=1;
        }
    }
}


</script>
<style type="text/css">
#box{
width: 200px;
height: 50px;
border: 1px solid black;
background-color: #ccc;
opacity: 0;
}
</style>
</head>
<body>
<div onMouseOver="FadeEffect(1)" onMouseOut="FadeEffect(0)" id="box">Menu</div>
</body>
</html>

编辑：用 setTimeout() 函数更新了代码。

【问题讨论】：

你可以试试 jQuery。它非常好，您可以轻松地为元素添加淡入淡出效果。
感谢您的建议，但问题仍未得到解答。看，我是一个初学者，我真的很想弄清楚。
您在问题中说您使用“setTimeout()”，但在您发布的代码中没有调用“setTimeout()”。
抱歉，一定是复制粘贴了错误的代码块。现在更新了。
更新后的代码仍有一些问题。请参阅我的更新答案。顺便说一句，我和 Pointy 在我们的答案中使用 Math.min() 和/或 Math.max() 的原因是 JavaScript 处理浮点数的方式（加 0.1 十次不等于 1.0）。

标签： javascript fade effect

【解决方案1】：

我看到的函数有两个问题。

首先，您的if 语句都进行赋值而不是比较。当您应该说 if (n===0)（三个 ===，比较，或者您可以使用两个 == 进行类型转换比较）时，您说的是 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() - 你应该有条件地这样做，就像我和Pointy给出的答案一样。此外，您似乎依赖于变量 i，作为局部变量，它不会在调用之间保留其值 - 您可以将其设为全局变量，但最好像我一样将其作为参数或作为局部变量进行管理在像 Pointy 那样的外部函数中。

【讨论】：

再次感谢您的详细解答！我做了一些研究，学到了一些关于运算符和比较的新知识。我现在看到了我的错误。

【解决方案2】：

问题是所有这些对样式的更改都会在浏览器更新显示之前发生。您需要做的是使用“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。

【讨论】：

我刚刚使用 setTimeout() 函数编辑了代码，但似乎不起作用。
我正在开发一个 jsfiddle，但今天早上网站速度真的很慢......等一下
我明白了，但是请您看一下我更新的代码。由于某种原因它不起作用。
我没有看到您的代码有任何更新。还要确保你阅读了“nnnnn”的答案。
您的方式是错误的，因为网络浏览器根本无法以这种方式工作。对 DOM 元素的“样式”对象的更改不会立即生效。相反，浏览器会一直等到导致代码运行的事件（在您的情况下是鼠标事件）完全完成。只有这样，它才会担心屏幕更新，它会根据“样式”的最终状态进行更新。

【解决方案3】：

如果你想让它褪色，你需要创建一个函数来设置不透明度 -0.1 或 +0.1，然后在 100 毫秒（或更少）内使用 setTimeout 调用自身。不让脚本等待的话太快了，马上把不透明度设置为1.0。

无论如何，使用 jQuery 可以更轻松地做到这一点。

【讨论】：