jQuery淡入一个<li>？

Question

我正在创建一个任务管理器应用，只要用户添加项目，就会创建一个新的 li 。但是，只要创建了新项目，fadeIn（）就会触发页面上的每个li。有关获取fadeIn（）的任何帮助只会淡化添加的新项目吗？

$('form').submit(function() {

  // Grab input and set it to lowercase
  var input = $('.listInput').val().toLowerCase();

  // Fade in li whenever an item is added
  $('#list').append('<li>' + input + '</li>').hide().fadeIn(500);

  // Remove text from input
  $('.listInput').val('');

  return false;

});

Answer 1

$('<li>' + input + '</li>').hide().fadeIn(500).appendTo('#list');会这样做。 Fiddle

Answer 2

你可以先创建元素，然后添加它，然后淡入它来解决这个问题。我也更喜欢使用css使它最初隐藏而不是jQuery hide()：

$('form').submit(function() {

  // Grab input and set it to lowercase
  var input = $('.listInput').val().toLowerCase();

  // Create new element first
  var li = $('<li style="display:none">' + input + '</li>');

  // Fade in li whenever an item is added
  $('#list').append(li);
  li.fadeIn(500);

  // Remove text from input
  $('.listInput').val('');

  return false;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form>
  <ul id="list">
    <li>abc</li>
    <li>def</li>
  </ul>
  <input type="text" class="listInput" />
  <button type="submit">Submit</button>
</form>