title: Using jQuery, how would I get a div to increase height slowly rather than instantly with button onClick?
body: <p>Here is my jfiddle: <a href="http://jsfiddle.net/6mfb1kL0/" rel="nofollow">http://jsfiddle.net/6mfb1kL0/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="SearchDiv"&gt;
              Hello there...
  &lt;/div&gt;
  
  
   &lt;button type="button" onClick="changeHeight();"&gt;Click Me!&lt;/button&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#SearchDiv{
   background-color:red;   
   width:1000px;
   height:20px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function changeHeight() {
  document.getElementById('SearchDiv').style.height = "200px";
  }
  </code></pre>