如何用jQuery逐个淡入前5个子元素？（Jekyll主题开发）

嘿，刚接触jQuery的话，这个需求其实很好实现，结合你提到的slice()或者:lt()选择器就行，我给你拆解一下具体步骤：

第一步：先隐藏目标元素 #

首先要让这些元素一开始是隐藏的，这样淡入动画才有效果。你可以用CSS来设置：

/* 替换成你文章内容的容器类名，比如Jekyll常用的.post-content或.entry-content */
.post-content p, 
.post-content h1, 
.post-content h2, 
.post-content h3, 
.post-content img, 
.post-content li {
  display: none;
}

第二步：用jQuery实现逐个淡入 #

接下来写jQuery代码，核心就是筛选前5个目标元素，然后给每个元素加上递增的延迟，实现逐个出现的效果：

方案1：用slice()方法（推荐，更灵活） #

$(document).ready(function() {
  // 1. 找到文章容器下所有你要的元素
  // 2. 用slice(0,5)截取前5个（索引从0开始，到第4个，共5个）
  const $firstFiveElements = $('.post-content').find('p, h1, h2, h3, img, li').slice(0, 5);
  
  // 逐个淡入，每个元素延迟时间递增
  $firstFiveElements.each(function(index) {
    // index是当前元素的序号（0到4），每个元素比前一个晚300ms开始动画
    $(this).delay(index * 300).fadeIn(600);
  });
});

方案2：用:lt()选择器 #

和slice效果一样，只是写法不同，直接在选择器里筛选前5个：

$(document).ready(function() {
  $('.post-content').find('p, h1, h2, h3, img, li:lt(5)').each(function(index) {
    $(this).delay(index * 300).fadeIn(600);
  });
});

一些小提示 #

• 替换.post-content为你主题里实际的文章内容容器类名，比如有些主题用.entry-content
• 如果不想选中嵌套的元素（比如列表项里的段落），可以把find()换成直接子元素选择器，比如：

  $('.post-content > p, .post-content > h1, .post-content > h2, .post-content > h3, .post-content > img, .post-content > li').slice(0,5)
  

• 你可以调整delay()里的300和fadeIn()里的600来控制动画间隔和时长，数字越大动画越慢

内容的提问来源于stack exchange，提问作者David Relich