Question

HTML

 <li onClick="changeHeight();" >Project Info</li>

 <div id="content-about-project" style="width: 100%; border:1px solid gray;">
content
  </div>

的js

function changeHeight() {
document.getElementById('content-about-project').style.height = "600px"
}

目前为止做了什么代码..

用户点击链接（a）并调用js函数，当发生这种情况时，div的高度扩展为600px;

我的问题

当它延伸高度时，我如何减慢div。现在它的速度非常快，而且我并不喜欢它。

Answer 1

使用JavaScript函数<li onClick="changeHeight();"> Project Info </li> <div id="content-about-project" style="width: 100%; border:1px solid gray;"> content </div> <script> newHeight=50; function changeHeight() { if (newHeight<600) { newHeight+=5; document.getElementById('content-about-project').style.height = newHeight+"px"; setTimeout(changeHeight,5); } } </script>。

＆＃13;

{{1}}

＆＃13;

Answer 2

尝试使用classList.toggle()函数。使用dom中的直接css属性更改会更好。并使用transition来减慢效果

function changeHeight() {
document.getElementById('content-about-project').classList.toggle('expand')
}

.normal{

transition:all 0.5s ease-in;
height:15px;
}
.expand{
height:600px;
}

 <li onClick="changeHeight();" >Project Info</li>

 <div id="content-about-project"  class="normal" style="width: 100%; border:1px solid gray;">
content
  </div>

Answer 3

您可以使用css实现此目的。

而不是给出内联风格，使用值附加一个类。

使用min-height而不是height。

使用css进行转换

如何使用JavaScript来减慢div转换？

3 个答案: