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“

jQuery：fadeIn前n个孩子一个接一个

2 个答案: