title: Animate item creation on Bootstrap List group
body: <p>I use Bootstrap's list group to display a list of item like this : </p>
  
  <pre><code>&lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Aucune catégorie&lt;/li&gt;
          &lt;div class="newitems"&gt;&lt;/div&gt;&lt;br/&gt;
          &lt;li class="list-group-item"&gt;&lt;input type="text" placeholder="New item" class="newcat form-control"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And this little piece of jQuery to add items : </p>
  
  <pre><code>$('.newcat').bind("enterKey",function(e){
      $('.newitems').append('&lt;li class="list-group-item"&gt;' + $(this).val() + '&lt;/li&gt;');
  });
  
  $('.newcat').keyup(function(e){
      if(e.keyCode == 13) {
          $(this).trigger("enterKey");
      }
  });
  </code></pre>
  
  <p>It works juste fine, but I'd like to add an animation to make it better. I tried the <code>slideDown</code> method, that's in theory what I'd want, but it's not working when applied to the <code>append()</code> method. 
  How can I make this move?</p>