title: Jquery slidedown not working
body: <p>I'm pretty much new to the jquery library, so I was experimenting with some jquery functions. This is the code I wrote</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;slide&lt;/title&gt;
  
      &lt;style&gt;
          .outer  {
  
              width: 700px;
              height: 1000px;
              border: 2px dashed green;
              margin: 20px;
          }
  
          .box    {
              widht: 100px;
              height: 80px;
              border: 2px solid green;
              margin: 20px;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type='button' id='btn' value='click' /&gt;
      &lt;div class='outer'&gt;&lt;/div&gt;
      &lt;script type='text/javascript' src='jquery.js'&gt;&lt;/script&gt;
      &lt;script&gt;
          $('#btn').click(function()  {
              $('.outer').prepend("&lt;div class='box'&gt;&lt;/div&gt;");
              $('.box').slideDown(3000);
          });
      &lt;/script&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p></p>
  
  <p>As you see, if i click the button, a new div prepends to the parent div. However the jquery slideDown function doesn't seem to have any effect but when I used slideUp, it worked as expected. So whenever i click the button the new div is created but no slidedown animation takes place. Am I missing something?</p>