jQuery动画应该在悬停时暂停
这是我的代码:
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>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</section>