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

我试着用setTimeout（）函数做一个JS淡入淡出效果，它似乎在某种程度上工作，但我似乎无法弄清楚什么是错的代码如下：一个JS淡入淡出效果不起作用（for循环）

<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（）函数更新代码。

来源

2011-12-28 Onion

你可以试试jQuery。这是非常好的，你可以很容易地添加淡入淡出效果元素。 – omnidan 2011-12-28 14:53:47

感谢您的建议，但问题仍未解答。看，我是一个初学者，我真的想全力以赴。 – Onion 2011-12-28 14:55:56

你在你的问题中说你使用“setTimeout（）”，但在你发布的代码中没有对“setTimeout（）”的调用。 – Pointy 2011-12-28 15:13:04

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

首先，您的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那样。

来源

2011-12-28 15:03:52 nnnnnn

谢谢你的回答！ – Onion 2011-12-28 15:22:29

再次感谢您的详细解答！我做了一些研究，并且学习了关于运算符和比较的新内容。我现在看到我的错误。 – Onion 2011-12-28 15:36:02

问题是，所有这些样式的变化都会在浏览器更新显示之前发生。你需要做的是使用“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); 
}

编辑 — Here是演示的jsfiddle。

来源

2011-12-28 14:59:21 Pointy

我刚刚使用setTimeout（）函数编辑了代码，该函数看起来不起作用。 – Onion 2011-12-28 15:02:21

我正在做一个jsfiddle，但是这个网站今天早上真的很慢...坚持一秒 – Pointy 2011-12-28 15:03:08

但是，我看到了，请你看看我更新过的代码。由于某种原因，它不起作用。 – Onion 2011-12-28 15:07:08

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

不管怎么说，使用jQuery你可以更容易地做到这一点。

来源

2011-12-28 15:00:41 omnidan

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

回答

相关问题