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

Answer 2

CSS3

您可以使用CSS3过渡，这样就可以单独使用JavaScript。它还会自动使所有height更改顺利进行。

-webkit-transition: 2s height ease;
transition: 2s height ease;

Your Fiddle

Support Table

<小时/>

的jQuery

您还可以使用jQuery .animate()

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

Fiddle

jQuery Browser Support

Answer 3

你有什么理由要用jQuery吗？使用CSS非常容易。

jsfiddle

 transition: all .5s ease;
 -webkit-transition: all .5s ease

Answer 4

您可以在jQuery中使用animate函数：http://api.jquery.com/animate/

或者，如果浏览器兼容性不那么令人担忧，您可以完全通过css来完成：http://www.w3schools.com/css/css3_transitions.asp

我会敲一下每个人的样本，但我现在不在PC上了！