Javascript JS淡入效果不会'；t工作（用于循环）_Javascript_Fade_Effect

Javascript JS淡入效果不会'；t工作（用于循环）

javascript

Javascript JS淡入效果不会'；t工作（用于循环）,javascript,fade,effect,Javascript,Fade,Effect,我尝试使用setTimeout（）函数实现JS淡入淡出效果，它似乎在某种程度上起作用，但我似乎无法找出下面代码的错误： <html> <head> <title></title> <script type="text/javascript"> function FadeEffect(n) { var i=1; fade = document.getElementById("box"); if (n===1)

我尝试使用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>


功能FadeEffect（n）
{
var i=1；
fade=document.getElementById（“框”）；
如果（n==1）
{
淡入度、样式、不透明度=i/10；
i++；
设置超时（“FadeEffect（1）”，50）；
如果（淡入淡出.样式.不透明度=1）
{
var i=1；
}
}
else如果（n==0）
{
不透明度=1-i/10；
i++；
设置超时（“FadeEffect（0）”，50）；
如果（淡入淡出.样式.不透明度=0）
{
var i=1；
}
}
}
#盒子{
宽度：200px；
高度：50px；
边框：1px纯黑；
背景色：#ccc；
不透明度：0；
}
菜单

编辑：使用setTimeout（）函数更新代码。

问题是，所有样式更改都将在浏览器更新显示之前发生。您需要做的是使用“setTimeout（）”在一段非常长的时间内将更改隔开

函数fadeIn（）{
函数增量（）{
box.style.opacity=Math.min（1.0，（不透明度+=0.1））；
如果（不透明度<1.0）{
设置超时（增量，100）；
}
}
var-box=document.getElementById（'box'），不透明度=0；
box.style.opacity=不透明度；
设置超时（增量，100）；
}

edit-是一个要演示的jsfiddle。

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

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

我可以看到该函数存在两个问题

首先，您的

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>

功能fadeEffect（元素、起始值、目标、延迟）{
element.style.opacity=起始值；
if（起始值<目标值）
startValue=Math.min（startValue+0.1，目标）；
其他的
startValue=Math.max（startValue-0.1，目标）；
if（起始值！=目标值）
setTimeout（函数（）{fadeEffect（元素，起始值，目标，延迟）；}，延迟）；
}
菜单

演示：

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

更新：更新后的代码引入了具有相同赋值的新if语句，而不是比较问题。它还将永远调用

setTimeout（）

——您应该有条件地这样做，正如我给出的答案中所述。此外，您似乎还依赖于变量

，该变量作为局部变量，在调用之间不会保留其值-您可以将其设置为全局变量，但最好像我那样将其作为参数进行管理，或者像Pointy那样将其作为外部函数中的局部变量进行管理。

您可以尝试使用jQuery。这是非常好的，你可以很容易地添加淡入淡出效果的元素。谢谢你的建议，但问题仍然没有答案。看，我是一个初学者，我真的很想弄清楚。你在问题中说你使用了“setTimeout（）”，但在你发布的代码中没有对“setTimeout（）”的调用。对不起，一定是复制粘贴了错误的代码块。现在已更新。更新的代码中仍然存在一些问题。请参阅我的最新答案。顺便说一下，Pointy和我在回答中使用

Math.min（）

和/或

Math.max（）

的原因是JavaScript处理浮点数的方式（将0.1加十次不会得到1.0）。我刚刚用setTimeout（）编辑了代码功能似乎不起作用。我正在使用一个JSFIDLE，但是今天早上这个网站的速度真的很慢。。。等一下，我知道了，你能看一下我更新的代码吗。由于某些原因，它无法工作。我看不到您的代码有任何更新。还要确保你阅读了“nnnnn”中的答案。你的方式是错误的，因为网络浏览器根本就不是这样工作的。对DOM元素的“样式”对象的更改不会立即生效。相反，浏览器会等待导致代码运行的事件（在您的情况下是鼠标事件）完全完成。只有这样，它才会担心屏幕更新，并根据“样式”的最终状态执行更新。再次感谢您的详细回答！我做了一些研究，学到了一些关于运算符和比较的新知识。我现在明白我的错误了。

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>