如何为循环淡入淡出的文本添加消失前的显示延迟？

嘿，这个需求很容易搞定！你现在的代码是文本一淡入完成就立刻开始淡出，所以没有停留时间。我们只需要在文本完全显示后，添加一段延迟再触发下一次切换就行，具体调整如下：

修正后的完整代码 #

HTML #

<div class="fadey">Hallo</div>
<div class="fadey">Bonjour</div>

CSS #

/* 注意：把原来的.myFade改成.fadey，不然样式不会生效 */
.fadey { 
  position: absolute; 
  height: 50px; 
  width: 100px; /* 稍微加宽一点，避免文字溢出 */
  display: none; /* 初始状态隐藏所有文本 */
}
/* 默认显示第一个文本，避免页面加载时的空白 */
.fadey:first-child {
  display: block;
}

JavaScript #

$(document).ready(function () {
  var faderIndex = 0, 
      faderOutSpeed = 1000, // 淡出速度，和你原来的一致
      faderInSpeed = 1000,  // 淡入速度
      faderPause = 3000,    // 新增：文本停留时长（毫秒），可按需调整
      faders = $('.fadey');

  function nextFade() {
    $(faders[faderIndex]).fadeOut(faderOutSpeed, function () {
      // 切换到下一个文本索引
      faderIndex++;
      if (faderIndex >= faders.length) faderIndex = 0;
      
      // 淡入下一个文本，完成后延迟指定时间再触发下一次切换
      $(faders[faderIndex]).fadeIn(faderInSpeed, function() {
        setTimeout(nextFade, faderPause);
      });
    });
  }

  // 启动循环
  nextFade();
});

关键修改点说明 #

• 新增停留时长变量：faderPause用来控制文本显示后停留的时间，单位是毫秒（比如3000就是3秒），你可以根据需求随便调整数值。
• 延迟触发下一次切换：在fadeIn的回调函数里，用setTimeout包裹nextFade，这样文本完全显示后，会先停留你设置的时长，再开始淡出切换。
• 修正CSS类名：原来的CSS类是.myFade，但HTML里的元素类是.fadey，这会导致绝对定位不生效，所以统一改成.fadey，同时添加初始隐藏和第一个文本默认显示的样式，优化页面加载体验。

这样调整后，文本就会按照「显示→停留指定时间→淡出→淡入下一个→停留→...」的循环逻辑运行啦～

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