Stop jquery function fade on mouseover

Question

i have a html code like this:

<div id="principal">
    <div id="quote1"> 1 Div </div>
    <div id="quote2"> 2 Div </div>
</div> 

And the function for fadein/fadeout those "quote" div's in a loop:

  jQuery(function () {
    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;

        $els.slice(1).hide();
        setInterval(function () {
            $els.eq(i).fadeOut(function () {
                i = (i + 1) % len
                $els.eq(i).fadeIn();
            })
        }, 4000) 
    })

The problem is: i want to stop the fadeIn/fadeOut animation on mouseover on "Principal" div and return the animation on mouseleave. How can i stop the animation and freeze the actual div?

Answer 1

You could use a class to determine when the interval should appear to hault. By adding and removing it on hover and hover out, then the interval can check to see if the elements have the class or not. If they have the class, skip the operation that interval.

jQuery(function() {
  var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

  $els.slice(1).hide();

  setInterval(function() {
    if (!$els.hasClass('pause')) {
      $els.eq(i).fadeOut(function() {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
      });
    }
  }, 2000);

  $els.on('mouseenter', function() {
    $els.addClass('pause')
  });
  $els.on('mouseleave', function() {
    $els.removeClass('pause')
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="principal">
  <div id="quote1"> 1 Div </div>
  <div id="quote2"> 2 Div </div>
</div>