Question

I am using a jQuery script to fade in and out a bunch of <p>....</p> tags which works fine but I need the animation to pause on mouseover and resume on mouse out! Is there any method I can add to the script to handle this?

$(function() {
  function InOut(elem) {
    elem.delay()
      .fadeIn(600)
      .delay(5000)
      .fadeOut(600,
        function() {
          if (elem.next().length > 0) {
            InOut(elem.next());
          } else {
            InOut(elem.siblings(':first'));
          }

        }
      );
  }

  $('#anidiv p').hide();
  InOut($('#anidiv p:first'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anidiv">
  <p>Pause jquery animation on mouseover...1</p>
  <p>Pause jquery animation on mouseover...2</p>
  <p>Pause jquery animation on mouseover...3</p>
  <p>Pause jquery animation on mouseover...4</p>
</div>

JSFiddle

Answer 1

Instead of checking the visibility to continue you can put some
class or anything that suit you to distinguish the current show element from the others.

   $('#anidiv p').hide();
InOut($('#anidiv p:first'));

function InOut(elem) {
    elem.delay().fadeIn(600).delay(5000).fadeOut(600, function() {
        if (elem.next().length > 0) {
            InOut($(this).next());
        }
        else {
            InOut($(this).siblings(':first'));
        }

    });
}

$('#anidiv p').mouseover(function() {
    $(this).stop(true, true);
});
$('#anidiv p').mouseout(function() {
    if ($(this).is(":visible") == true) {
        InOut($(this));
    }
});

stop animation on mouseover