鼠标悬停时暂停动画

Question

我正在使用 jQuery 脚本淡入和淡出一堆

....

标签，效果很好，但我需要动画在鼠标悬停时暂停并在鼠标悬停时恢复鼠标移开！我可以在脚本中添加任何方法来处理这个问题吗？

$(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 的答案应该很好。