Приостановить анимацию при наведении курсора

Question

Я использую сценарий jQuery для постепенного увеличения и уменьшения набора тегов <p>....</p>, который работает нормально, но мне нужна анимация, чтобы приостановить наведение мыши и возобновить наведение мыши! Есть ли способ, который я могу добавить к сценарию, чтобы справиться с этим?

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

Вместо того, чтобы проверять видимость для продолжения, вы можете поместить какой-нибудь класс или что-нибудь подходящее вам, чтобы отличить текущий элемент шоу от других.

   $('#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));
    }
});

остановка анимации при наведении мыши

Answer 2

Этот плагин даст jQuery функциональность для приостановки и возобновления отдельных анимаций.Для приостановки серии анимаций ответ zdrsh должен подойти.