为什么在调用fadeIn() onLoad时浏览器会立即运行循环?换句话说,setInterval或Opacityto()存在问题。
function Opacityto(elem,v){
elem.style.opacity = v/100;
elem.style.MozOpacity = v/100;
elem.style.KhtmlOpacity = v/100;
elem.style.filter=" alpha(opacity ="+v+")";}
function fadeIn(){
elem=document.getElementById('nav');
for (i=0;i==100;i++){
setInterval(Opacityto(elem,i),100);}
}
我想有人会告诉我这可以用jQuery最简单地完成,但我对用javascript做这件事很感兴趣。
谢谢!救命!
您的fadeIn()
函数有几个问题:
。你的for循环条件是i==100
,它在第一次迭代时不为真,因此for循环的主体永远不会被执行(i++
永远不会发生)。也许您指的是i<=100
或i<100
(取决于您是希望循环运行101次还是100次)?
B。您的setInterval
代码有一个语法错误EDIT:,因为您已经更新了您的问题以删除引号- setInterval
期望字符串或函数引用/表达式。所以你需要传递给它一个函数的名字,不带括号和参数,或者一个函数表达式,就像你在下面的代码中看到的匿名函数表达式。在你试图构建传递给它的字符串的方式中。你有这个:
"Opacityto("+elem,i+")"
但是你需要这个:
"Opacityto(elem," + i + ")"
后者生成一个字符串,根据i
,它看起来像"Opacityto(elem,0)"
,也就是说,它生成一个有效的JavaScript片段,将调用Opacityto()
函数。
C。您可能需要setTimeout()
而不是setInterval()
,因为setInterval()
将永远每100ms 运行Opacityto()
函数,而setTimeout()
将在100ms延迟后恰好运行Opacityto()
一次。考虑到你在循环中调用它,我确信你真的不想调用setInterval()
100次来导致你的函数Opacityto()
每100毫秒运行100次永远。
D。即使解决了以上所有问题,你的基本结构也不会达到你想要的效果。当您调用setInterval()
或setTimeout()
时,它不会暂停当前代码块的执行。因此,整个for循环将运行并立即创建所有的间隔/超时,然后当100ms结束时,它们将或多或少地同时被触发。如果你的意图是在每100毫秒发生一次变化时逐渐改变不透明度,那么你需要以下代码(或相应的一些变化):
function fadeIn(i){
// if called with no i parameter value initialise i
if (typeof i === "undefined") {
i = -1;
}
if (++i <= 100) {
Opacityto(document.getElementById('nav'), i);
setTimeout(function() { fadeIn(i); }, 100);
}
}
// kick it off:
fadeIn();
上面所做的是定义fadeIn()
,然后不传递参数调用它。该函数检查i
是否未定义,如果未定义,则将其设置为-1(如果在不传递参数的情况下调用它,则会发生这种情况)。然后,它将i
加1,并检查结果是否小于或等于100,如果小于或等于100,则调用Opacityto()
,并传递对元素和i
的引用。然后在100ms时间内使用setTimeout()
调用自身,将当前的i
传递过去。因为setTimeout()
在if测试中,一旦i
变得足够大,函数停止设置超时,整个过程结束。
还有其他几种方法可以实现这个,但这只是我开始输入时发生的第一个…
我猜是setInterval里面有一个讨厌的逗号,弄乱了参数列表:
"Opacityto("+elem,i+")"
^^^
here
你可以试着引用逗号
+ "," +
但是eval是邪恶的,所以不要这样做。好的方法是传递一个真正的回调函数:
function make_opacity_setter(elem, i){
return function(){
OpacityTo(elem, i);
};
}
...
setTimeout( make_opacity_setter(elem, i), 1000);
请注意,中间的function-making-function是必要的,以避免闭包和for循环之间令人讨厌的交互。
顺便说一句,当你这样做的时候
setInterval(func(), 1000)
你自己调用一次func,然后将的返回值传递给setInterval。因为setInterval接收的是垃圾值而不是回调,所以它不会像你想的那样工作。