javascript - 如何使 Div 的高度变化更慢

Question

我想通过从页面顶部缓慢单击按钮向下滚动来显示 Div。但是当我用我现在拥有的东西来做这件事时，它只是显得非常快，并没有真正滑下来。我究竟做错了什么？

function showstuff(inquiryForm){
   document.getElementById(inquiryForm).style.visibility="visible";
    for (var i=0;i<300;i++)
    {
 document.getElementById(inquiryForm).style.height= i + "px";
    }
}

Answer 1

您正在循环 300 个项目，并尝试使用getELementById查找元素，然后尝试设置所选项目的样式

我认为这使得这个过程非常缓慢和滞后。

Answer 2

Here is an example that should help you understand the event loop, 

以及 setTimeout 的使用。

<div id="myDiv" style="width:10px;height:50px;background:#f00;"></div>

<button class="btn" onclick="start();">Start</button>
<button class="btn" onclick="stop();">Stop</button> 
<button class="btn" onclick="reset();">Reset<button>

var timeout;

function start() {
    var div = document.getElementById("myDiv");
    var size = 10;

    var func = function () {
        timeout = setTimeout(func, 0);
        div.style.width = size + "px";
        if (size++ == 600) stop();
    }

    func();  // starts the process
}

function stop() {
    clearInterval(timeout);
}

function reset() {
    var div = document.getElementById("myDiv");
    div.style.width = "10px";
}

Answer 3

这类事情通常使用 jquery 来处理，因为它包含各种动画功能，包括一个在这里有用的方便的简短形式：

一旦你包含了 jquery 库，你可以使用这样的函数：

$(inquiryForm).slideDown( 500 );

其中参数是以毫秒为单位的效果持续时间

像这样：

function showstuff(inquiryForm){
    $(inquiryForm).slideDown( 500 );
}