Using jQuery, how would I get a div to increase height slowly rather than instantly with button onClick?

Question

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

Sushil · Accepted Answer · 2015-04-10T19:21:31.140

5

you can use the animate method in jquery for the desired behavior. here 200 is the height in pixels and 500 is the time in milliseconds.

   function changeHeight() {

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

edited Apr 10 '15 at 19:21

answered Apr 10 '15 at 19:13

Sushil

1

@vihan1086. both the answers were added at the same time. – Sushil Apr 10 '15 at 19:15
1

nope. it was at the same time. both of mine and @Sterling's answer were seconds apart. – Sushil Apr 10 '15 at 19:17
1

@vihan1086.. just edited.. – Sushil Apr 10 '15 at 19:21
Everyone's answer was extremely helpful. I think yours was first. Thank you all, it's very appreciated. – Sherri Apr 10 '15 at 19:43

Downgoat · Answer 2 · 2015-04-10T19:36:15.410

3

You can use CSS3 transitions, this leaves your JavaScript alone. It will also automatically make all height changes smooth.

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

You can also use jQuery .animate()

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

edited Apr 10 '15 at 19:36

answered Apr 10 '15 at 19:13

Downgoat

Jesse Dockett · Answer 3 · 2015-04-10T19:28:25.550

2

Is there a reason why you have to do it with jQuery? It's quite easy with CSS.

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

edited Apr 10 '15 at 19:28

answered Apr 10 '15 at 19:21

Jesse Dockett

2

What does your answer introduce that wasn't already posted 6 minutes ago 4 times? (once deleted) – Sterling Archer Apr 10 '15 at 19:23
2

No need to add any other prefixes but `-webkit-` for older android browsers. – Downgoat Apr 10 '15 at 19:23
3

Man, a quick trip to the bathroom and I catch flack for not being the first to the table. When I clicked to answer there were 0 in here. – Jesse Dockett Apr 10 '15 at 19:26
2

@JesseDockett isn't stack overflow fun? – Dan Beaulieu Apr 10 '15 at 19:29
1

It certainly is different. I figured I had gotten enough help from the community over the last few years, I should start to give back. Really strange to get scolded for giving a valid answer shortly after a question was posed. Also, nobody else included the vendor prefix in their CSS based answers. – Jesse Dockett Apr 10 '15 at 19:33

score 1 · Answer 4 · answered Apr 10 '15 at 19:15

1

You can use the animate function in jQuery: http://api.jquery.com/animate/

Or if browser compatibility is less of a concern you can do it purely through css: http://www.w3schools.com/css/css3_transitions.asp

I'd knock a sample of each up, but I'm not at a PC right now!

answered Apr 10 '15 at 19:15

Steven Brookes

1

Don't add links for an answer – Downgoat Apr 10 '15 at 19:17
2

why not? I believe that it helps to give links even if it's not the full answer so that a user can use them and gain the knowledge required to do what she/he needs. And even if you give the answer with code you should always give links to the documentation that you used to achieve the answer so that the user can keep learning. – Samuel Lopez Apr 10 '15 at 19:21
1

My guess I'd because the link may end up 'dead' in future, where as relevant quoted text will always be available? – Steven Brookes Apr 10 '15 at 19:37

4 Answers4