我想实现第一个li不透明度100时，下一个li才开始改变透明度，但是咋全会显示呢？

发布网友发布时间：2022-05-05 10:08

共1个回答

热心网友时间：2023-10-05 07:16

　　你这样写肯定是同时，因为for循环从1到8几乎是瞬间的事情所以你这个看起来就是同事执行了
改成：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
#div1{
width:500px;
height:50px;
}
#div2{
width:500px;
height:50px;
display:none;
}

ul, li {
list-style-type: none;
font-size:0px;
}
li{
display:inline-block;
width: 100px;
text-align: center;
font-size:16px;
}
#div2 li{
filter:alpha(opacity:0);
opacity:0;
}
</style>
<script>
window.onload=function ()
{
var oDiv2=document.getElementById('div2');
var obtn=document.getElementById('btn');

obtn.onclick=function ()
{
var aLi=oDiv2.getElementsByTagName('li');
oDiv2.style.display='block';
var i = 0;
var len = aLi.length;
change(aLi[i])
function change(element)
{
var alpha=0;
var alphaSpeed=1;
var timer=null;

timer=setInterval(function (){
if(element.style.filter=='alpha(opacity:100)' || element.style.opacity==1)
{
clearInterval(timer);
i++;
if(i < len){
change(aLi[i]);
}
}
else
{
alpha+=alphaSpeed;
element.style.filter='alpha(opacity:'+alpha+')'; //IE
element.style.opacity=alpha/100;
}

},30);

};
};

};
</script>
</head>

<body>
<div id="div1">
<ul>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
</ul>
</div>
<div id="div2">
<ul>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
</ul>
</div>
<input type="button" id="btn" value="显示所有品牌"/>
</body>