为什么把下面代码中setTimeout中的第二个参数改成常数后就没有缓动的效果了呢

Question

<br> window.onload=function()<br> {<br> var re=document.getElementById(&quot;mButton&quot;);<br> var hei=&quot;300&quot;;<br> var wid=&quot;300&quot;;<br> re.onclick=slideDown;<br> function slideDown()<br> {<br> elem=document.getElementById(&quot;container&quot;);<br> elem.style.height=&#39;0px&#39;;<br> elem.style.width=&#39;0px&#39;;<br> elem.style.display=&quot;&quot;;<br> for(var i=0;i<100;i+=5)<br> {<br> (function()<br> {<br> var pos=i;<br> //alert(pos+"\n"+(pos/100)*hei+"\n"+(pos+1)*10);<br> setTimeout(function(){elem.style.height=(pos/100)*hei+"px";elem.style.width=(pos/100)*wid+"px";},(pos+1)*100);<br> })();<br> }<br> }<br> alert(document.body.scrollWidth+'px');<br> alert(document.body.scrollLeft+"px");<br> };<br>


Slider

现在是有缓动效果的，可是把
setTimeout(function(){elem.style.height=(pos/100)*hei+"px";elem.style.width=(pos/100)*wid+"px";},(pos+1)*100);中的（pos+1）*10改成常数，比如50后，就没有缓动效果了，这是为什么啊？

Answer 1

因为这个算法实现的div的size是线性增长的

width(K) = K * w (K为增长系数, w为最大宽度)
height(K) = K * h (K为增长系数, h为最大高度)

所以延时也要与size的增长一致，即呈线性增长
delay(T) = T * d (T为增长系数，d为延时基数)

如果想要将delay设为常数，同时达到相同的效果，那么size的增长率也应是一个常数，即在上一size的基础上加上一个常数值。

window.onload=function() { var re=document.getElementById("mButton"); var hei="300"; var wid="300"; re.onclick=slideDown; function slideDown() { elem=document.getElementById("container"); elem.style.height='0px'; elem.style.width='0px'; elem.style.display=""; setTimeout(function() {slid(elem);}, 5); } function slid(elem){ elem.style.height=elem.style.width= parseInt(elem.style.width) + 5 +"px"; if (parseInt(elem.style.width) <= wid) { setTimeout(function() {slid(elem);}, 10); } } alert(document.body.scrollWidth+'px'); alert(document.body.scrollLeft+"px"); };

Slider