Maihan Nijat Maihan Nijat - 2 years ago 110
Javascript Question

How to use animation with append in jQuery?

How to use animation while appending new element using jQuery? I went through couple of answers here but the same method does not work for me. I used

but it does not seem that animates the new element.

$(document).ready(function() {

function add() {
var newItem = $('#new-item-text');
var span = $('<span>', {
class: 'remove',
click: remove
var li = $('<li>', {
class: 'todo-item',
text: newItem.val(),
append: span,
click: completed
if (newItem.val()) {
$('ul.todo-list').append(li, $('li.todo-new')).fadeIn('slow');


.todo-list {
list-style: none;
padding: 0px;
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
.todo-new {
display: block;
margin-top: 10px;
.todo-new input[type='text'] {
width: 260px;
height: 22px;
border: 2px solid #444;
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
.todo-new a:hover {
background-color: #0EB0dd;

<script src=""></script>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span>
<li class='todo-new'>
<input id='new-item-text' type='text' />
<a id='add-item' href='#'>+</a>

Answer Source

To animate, you should start by hiding the elements, for instance by setting:

display: none;

Then fadeIn() will animate and set display: block;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download