title: Slow Motion with jQuery
body: <p>I have code here: <a href="http://jsfiddle.net/LnWRL/4/" rel="nofollow">http://jsfiddle.net/LnWRL/4/</a>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrap_demo"&gt;
     &lt;div id="demo"&gt;&lt;/div&gt;
     &lt;div id="show"&gt;&lt;/div&gt;
     &lt;input type="button" id="click" value="click" onClick="function" /&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $( "#click" ).click(function() {
         if($("#wrap_demo").height()==50)
          $("#wrap_demo").css("height","200");
          else  $("#wrap_demo").css("height","50");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and CSS code:</p>
  
  <pre><code>#wrap_demo{
  width:300px;
  height:50px;
  border:1px solid black;
  
  float:left;
  }
  #demo{
  width:200px;
  height:50px;
  background: black;
  position:relative;
  float:left;
  padding-rignt:20px;
  }
  #demo:before
  {
  content:"";
  width:150px;
  height:44px;
  background:white; 
  position:absolute;
  margin:3px 50px;
  float:left;
  }
  #show
  {
  
  width:50px;
  height:50px;
  background:transparent;
  margin:0 0 0 200px;/* 
  border-width:25px;
  border-color:transparent transparent transparent black;
  border-style:solid;  */
  position:relative;
  }
  #show:before
  {
  content:"";   
  width:0;
  height:0;
  background:transparent;
  border-width:25px;
  border-color:transparent transparent transparent black;
  border-style:solid;
  position:absolute;
  
  }
  #show:after
  {
  content:"";   
  width:0;
  height:0;
  background:transparent;
  border-width:22px;
  border-color:transparent transparent transparent white;
  border-style:solid;
  position:absolute;
  margin: 3px auto 3px 0;
  }
  #click{
  display:block;
  width:40px;
  height:40px;
  background:white;
  border-radius:50%;
  border:1px solid black;
  position:absolute;
  top:13px;
  left:170px;
  font-size:12px;
  line-height:30px;
  text-align:center;
  cursor:pointer;
  }
  #click:focus{
  outline:none;
  }
  </code></pre>
  
  <p>How can I extend the height of <code>wrap_demo</code> in slow motion with jQuery?</p>