如何在jQuery中使用附加動畫？

Question

如何在使用jQuery附加新元素的同時使用動畫？我在這裏經歷了幾個答案，但同樣的方法對我來說不起作用。我用show('show')和fadeIn('slow')，但它似乎並沒有動畫的新元素。

$(document).ready(function() { 
 
    $('#add-item').click(add); 
 

 
    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'); 
 
     newItem.val(''); 
 
    } 
 
    } 
 

 
});

.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="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul class='todo-list'> 
 
    <li class='todo-item'>4L 2% Milk 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Butter, Unsalted 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-new'> 
 
    <input id='new-item-text' type='text' /> 
 
    <a id='add-item' href='#'>+</a> 
 
    </li> 
 
</ul>

Answer 1

爲動畫，你應該通過隱藏要素，例如啓動設置：

display: none; 

然後fadeIn()將動畫，並設置display: block;