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

不是检查可见性以继续，而是可以放一些类或任何适合您区分当前show元素和其他元素的东西。

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

Answer 2

This plugin将为jQuery提供暂停和恢复单个动画的功能。为了暂停一系列动画，zdrsh的答案应该没问题。

在鼠标悬停时暂停动画

2 个答案: