jQuery animate .prepend

by Abhishek Satre

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button>
  Add
</button>
<div id="data">

</div>

CSS

#data{
  width:300px;
  border:1px solid #e6e7e8;
  background:#FFF;
}
.item{
  padding: 10px;
  border-bottom:1px solid #e6e7e8;
}

JavaScript

$('button').click(function() {
  $('#data').prepend('<div class="item">Test</div>');
	$("#data .item:first-child").hide();
   $("#data .item:first-child").fadeIn();
});