javascript - jQuery 淡入一个？

Question

我正在创建一个任务管理器应用程序，它会在用户添加元素时创建一个新的 li。但是，每当创建新元素时，页面上的每个 li 都会触发 fadeIn()。对于让 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

您可以通过先创建元素，然后附加它，然后淡入来解决这个问题。我也更喜欢使用 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>