Question

我尝试使用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（）函数更新代码。

Answer 1

问题是样式的所有更改都会在浏览器无法更新显示之前发生。您需要做的是使用＆＃34; setTimeout（）＆＃34;在更长的时间内完成更改。

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);
}

编辑 - Here是一个可以证明的jsfiddle。

Answer 2

我可以看到这个功能有两个问题。

首先，您的if语句既可以进行分配，也可以进行比较。当你说if (n=0)时，你说的是if (n===0)（one =，赋值）（三个===，比较，或者你可以使用两个==进行类型转换比较）。

其次，使用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这样的外部函数中的局部变量。

Answer 3

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

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

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

3 个答案: