如何使Div的高度更改较慢
如何使Div的高度更改较慢
提问于 2013-07-09 08:04:26
我想通过向下滚动一个按钮，从页面顶部缓慢单击，使Div出现。但当我用我现在拥有的东西做的时候，它看起来非常快，并没有真的滑下来。我做错了什么？
function showstuff(inquiryForm){
document.getElementById(inquiryForm).style.visibility="visible";
for (var i=0;i<300;i++)
{
document.getElementById(inquiryForm).style.height= i + "px";
}
}回答 3
Stack Overflow用户
发布于 2013-07-09 08:11:39
您正在循环300个项目，并尝试使用getELementById查找元素，然后尝试设置所选项目的样式
我认为这使得这个过程变得非常缓慢和滞后。
Stack Overflow用户
发布于 2013-07-09 08:14:24
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";
}Stack Overflow用户
发布于 2013-07-09 08:12:12
这类事情通常使用jquery来处理，因为它包括各种动画功能，包括一个在这里很有用的方便的简短形式：
一旦包含了jquery库，就可以使用如下所示的函数：
$(inquiryForm).slideDown( 500 );其中，参数是以毫秒为单位的效果持续时间
如下所示：
function showstuff(inquiryForm){
$(inquiryForm).slideDown( 500 );
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17537903
复制相关文章
相似问题
腾讯云开发者
