如何解决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 class="animatedText">
<div class="text">One</div>
<div class="text">Two</div>
<div class="text">Three</div>
<div class="text">Four</div>
</section>
目前,动画似乎在悬停时暂停,但如果您取消悬停,您可以看到总是突然显示下一个 div。所以它并不是真正的“暂停”,它只是停止并显示下一个 div。持续时间丢失。
如何解决这个问题?
非常感谢您的帮助!
解决方法
您为反向悬停运行函数 changeText()
犯了一个小错误。这里:
function(e) {
changeText();
loopTimer = setInterval(changeText,animationDuration);
})
因此获得了函数的双重开始。
只需删除此功能运行,您将获得所需的结果。因为你已经运行了这个函数 changeText()
:
loopTimer = setInterval(changeText,animationDuration);
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>
类似的东西?
$(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>