如何设置元素依次显示时长？solutionBlock依次淡入异常排查

嘿，我一眼就揪出问题所在啦！问题出在你代码里的next()方法上，咱们来拆解下逻辑：

你在.each()循环里，每次拿到当前的.solutionBlock元素后，调用了next()——这个方法是用来获取当前元素的下一个兄弟元素的。这就导致：

• 循环第一个元素（index=0）时，你给它的下一个元素（第二个）加了active类；
• 循环第二个元素（index=1）时，给它的下一个元素（第三个）加了active类；
• 循环第三个元素（index=2）时，它没有下一个兄弟元素，这一步等于白做；
• 而第一个元素自始至终都没被添加active类，自然不会显示出来！

修正后的代码 #

只需要去掉多余的next()，直接操作当前元素$(this)就好：

$('.solutionBlock').each(function(index) {
  $(this).delay(500 * index).addClass('active');
});

额外注意事项 #

要让淡入效果正常工作，你的CSS里得给元素加上过渡相关样式，比如：

.solutionBlock {
  width: 25%;
  height: 40vh;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  opacity: 0; /* 默认透明 */
  transition: opacity 0.5s ease; /* 添加过渡动画 */
}

.solutionBlock.active {
  opacity: 1; /* 激活后显示 */
}

这样修改后，三个.solutionBlock就会按照0ms、500ms、1000ms的顺序依次淡入啦～

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