Having Issue on Adding animation to Dynamic element in jQuery -

can please take @ this demo , let me know why not able add .slidedown() function process of entering dynamic div after parent of selected element?

$(function () {      $("button").on("click", function () {          $(".err").hide();          var elem = $(this);          elem.parent().after('<div class="alert alert-danger err" role="alert">thanks adding</div>').slidedown("slow");      });  });

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");  body {      padding:50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  <div class="well well-sm box">      <button class="btn btn-default btn-block" type="submit">add box</button>  </div>  <div class="well well-sm box">      <button class="btn btn-default btn-block" type="submit">add box</button>  </div>  <div class="well well-sm box">      <button class="btn btn-default btn-block" type="submit">add box</button>  </div>  <div class="well well-sm box">      <button class="btn btn-default btn-block" type="submit">add box</button>  </div>  <div class="well well-sm box">      <button class="btn btn-default btn-block" type="submit">add box</button>  </div>

this should work :)

$(function () {     $("button").on("click", function () {         var elem = $(this);         var $div = $('<div/>',{class: 'alert alert-danger err',role: 'alert'}).hide().text('thanks adding');         $div.insertafter(elem.parent());         $div.slidedown("slow");     }); }); 

https://jsfiddle.net/dja0jxm3/1/