这是我的代码：
null
var animationDuration = 3000;
var firstText = $(".text:first-child");
var currentText = firstText;
function changeText() {
$(currentText).css("display", "none");
var NextText = currentText.next(".text");
if (!NextText.length) NextText = firstText;
$(NextText).css("display", "block");
currentText = NextText;
}
var loopTimer = setInterval(changeText, animationDuration);
$('.animatedText').hover(function(e) {
clearInterval(loopTimer);
}, function(e) {
changeText();
loopTimer = setInterval(changeText, animationDuration);
}).text {
display: none;
white-space: pre-wrap;
font-size: 30px;
cursor: default;
}
.text:nth-child(1) {
display: block;
}<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>null
目前，动画似乎暂停悬停，但如果你取消悬停，你可以看到总是突然显示下一个div。所以它并不是真正的“暂停”，它只是停止然后显示下一个div。持续时间丢失。
怎么可能修复呢？
会非常感谢你的帮助！
运行函数changeText()进行反向悬停时犯了一个小错误。这里：
function(e) {
changeText();
loopTimer = setInterval(changeText, animationDuration);
})
这样就得到了函数的二次启动。
只需删除此函数运行，您将得到所需的结果。因为您已经运行了此函数changeText():
loopTimer = setInterval(changeText, animationDuration);
null
var animationDuration = 3000;
var firstText = $(".text:first-child");
var currentText = firstText;
function changeText() {
$(currentText).css("display", "none");
var NextText = currentText.next(".text");
if (!NextText.length) NextText = firstText;
$(NextText).css("display", "block");
currentText = NextText;
}
var loopTimer = setInterval(changeText, animationDuration);
$('.animatedText').hover(function(e) {
clearInterval(loopTimer);
}, function(e) {
loopTimer = setInterval(changeText, animationDuration);
}).text {
display: none;
white-space: pre-wrap;
font-size: 30px;
cursor: default;
}
.text:nth-child(1) {
display: block;
}<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>
像这样的？
null
$(function() {
var counter = 0,
divs = $(".text"),
divsN = divs.length,
intv;
function showDiv() {
divs.hide().eq(counter++ % divsN).show();
}
showDiv();
function auto() {
clearInterval(intv);
intv = setInterval(function() {
showDiv();
}, 2000);
}
auto();
divs.on("mouseenter mouseleave", function(e) {
var evt = e.type == "mouseenter" ? clearInterval(intv) : auto();
});
});.text {
display: none;
white-space: pre-wrap;
font-size: 30px;
cursor: default;
}
.text:nth-child(1) {
display: block;
}<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>