如何实现jQuery文本轮播动画hover时真正暂停，移开后继续剩余时长

我明白你的问题所在了——当前的实现只是粗暴地停止了定时器，鼠标移开后直接切换到下一个文本并重启定时，完全没考虑到暂停时已经流逝了一部分动画时长。要实现真正的「暂停后继续剩余时长」，我们需要记录每次文本切换的时间戳，从而计算出暂停时还剩下多少时间没走完。

核心思路 #

1. 新增变量记录上次文本切换的时间戳，每次切换文本时更新它。
2. 鼠标悬停时，除了清除定时器，还要计算当前轮次已经流逝的时间，进而得到剩余需要等待的时长。
3. 鼠标移开时，不再立刻切换文本，而是先等待剩余的时长，再执行切换并重启定时循环。

修改后的完整代码 #

JavaScript

var animationDuration = 3000; 
var firstText = $(".text:first-child"); 
var currentText = firstText; 
var loopTimer;
var lastSwitchTime = Date.now(); // 记录上次切换的时间戳

function changeText() { 
  $(currentText).css("display", "none"); 
  var nextText = currentText.next(".text"); 
  if (!nextText.length) nextText = firstText; 
  $(nextText).css("display", "block"); 
  currentText = nextText;
  lastSwitchTime = Date.now(); // 每次切换时更新时间戳
} 

// 初始化定时器
loopTimer = setInterval(changeText, animationDuration); 

$('.animatedText').hover(function(e) { 
  clearInterval(loopTimer);
  // 计算剩余时长：总时长 - 已经流逝的时间
  window.remainingTime = animationDuration - (Date.now() - lastSwitchTime);
}, function(e) { 
  // 先等待剩余时长，再执行切换并重启定时
  setTimeout(function() {
    changeText();
    loopTimer = setInterval(changeText, animationDuration);
  }, window.remainingTime);
})

CSS

.text { display: none; white-space: pre-wrap; font-size: 30px; cursor: default; } 
.text:nth-child(1) { display: block; }

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<section class="animatedText"> 
  <div class="text">One</div> 
  <div class="text">Two</div> 
  <div class="text">Three</div> 
  <div class="text">Four</div> 
</section>

关键修改点说明 #

• 新增lastSwitchTime变量：每次调用changeText时更新，用来标记当前文本开始显示的时间节点。
• 悬停时计算remainingTime：用当前时间减去上次切换时间，得到当前文本已经显示的时长，再用总时长减去这个值，就是剩余需要等待的时间。
• 移开时使用setTimeout替代立刻执行changeText：确保等待完剩余时长后再切换文本，然后重新启动定时循环，完美衔接之前的动画进度。

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