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 );
}

如何使Div的身高变化更慢

3 个答案: