jQuery animation should pause on hover

Question

This is my code:

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>

Currently, the animation seems to pause on hover, but if you unhover, you can see that always abruptly the next div gets shown. So it is not really a "pause", it just stops and shows the next div then. The duration time gets lost.

How is it possible to fix that?

Would be very thankful for help!

Answer 1

You made a small mistake by running function changeText() for the reverse hover. Here:

function(e) {
   changeText();
   loopTimer = setInterval(changeText, animationDuration);
}) 

Thus a double start of the function is obtained.

Just remove this function run and you will get the desired result. Because you already run this function 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>

Answer 2

Something like this?

$(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>