使用 jQuery，我如何让 div 缓慢增加高度，而不是立即使用按钮 onClick？

Question

这是我的 jfiddle：http : //jsfiddle.net/6mfb1kL0/

HTML

<div id="SearchDiv">
            Hello there...
</div>


 <button type="button" onClick="changeHeight();">Click Me!</button>

CSS

#SearchDiv{
 background-color:red;   
 width:1000px;
 height:20px;
}

JS

function changeHeight() {
document.getElementById('SearchDiv').style.height = "200px";
}

Answer 1

您可以在 jquery 中使用 animate 方法来实现所需的行为。这里 200 是以像素为单位的高度，500 是以毫秒为单位的时间。

   function changeHeight() {

        $('#SearchDiv').animate({height:200},500);
    }