jQuery动画应该在悬停时暂停

Question

这是我的代码：

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);
})

css prettyprint-override">.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。持续时间丢失。

怎么可能修复呢？

会非常感谢你的帮助！

Answer 1

像这样的？

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>

Answer 2

运行函数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>