如何在jQuery中使用附加动画？

Question

如何在使用jQuery追加新元素的同时使用动画？我在这里经历了几个答案，但同样的方法对我不起作用。我使用show('show')和fadeIn('slow')，但似乎没有动画新元素。

＆＃13;

＆＃13;

$(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('');
    }
  }

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要设置动画，您应该首先隐藏元素，例如设置：

display: none;

然后fadeIn()将动画并设置display: block;