jQuery：一个一个地淡入前n个孩子

Question

我是 jQuery 的新手，正在尝试创建一个 Jekyll 主题，它会一个一个地显示前五个帖子元素（段落、标题、图像、项目符号）。现在，我有一段代码会在所有帖子元素中消失，这 - 不幸的是 - 意味着对于很长的帖子，需要很长时间才能完成。

这是我目前的代码：

$(document).ready(function() {
   $(".post-content").children().each(function(index) {
      $(this).delay(300*index).fadeIn(0);
   });
});

我阅读了一些关于 :lt() 选择器和 slice() 方法的信息，但我还没有找到如何将其中一个与上面的代码结合起来，以便只有前五个孩子以这种方式动画。我可能只是错过了一些愚蠢的东西？

任何指针将不胜感激。谢谢！

Answer 1

您仍然希望选择整个组，而是检查索引以查看它是否小于 5，然后仅将 .delay(300*index) 应用于这些组。您可以立即显示其余部分，也可以按照其他方式显示，在此示例中，它将在 1.5 秒延迟后加载其余部分（在第 5 个显示之后）：

$(".post-content").children().each(function(index) {
  if(index < 5)
    $(this).delay(300*index).fadeIn();
  else
    $(this).delay(1500).fadeIn(); //  $(this).fadeIn(); to show immediately 
});

.post-content > * { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-content">
  <div>foo1</div>
  <div>foo2</div>
  <div>foo3</div>
  <div>foo4</div>
  <div>foo5</div>
  <div>foo6</div>
  <div>foo7</div>
  <div>foo8</div>
  <div>foo9</div>
  <div>foo10</div>
</div>

Answer 2

这是一个切片的工作示例，在承诺之后只是为了防止您想要在淡入淡出结束后显示每个元素，如果不只是删除它

$(document).ready(function() {
   $(".post-content").children().slice(0,5).each(function(index) {
      $(this).delay(300*index).fadeIn(0);
   }).promise().then(function( arg1 ) { 
   $(".post-content").children().slice(5).show()
   });
});

关于 lt 和 slice 的区别，这里有一个解释它们之间区别的答案： Selecting the first "n" items with jQuery

“虽然 :lt(20) 方法看起来更简洁，但如果你有一个大的结果集开始，使用 slice 会更有效。不幸的是，在评估 ":lt" 和其他位置选择器时，jQuery 循环遍历整个集合，即使它只是获取第一个元素。我已经在我的博客上写了更多关于这个的内容：spadgos.com/?p=51"