Question

我有这样的html代码：

winnls.h

以及用于在循环中淡入/淡出那些“引用” div的函数：

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

问题是：我想在“ Principal” div上的鼠标悬停时停止fadeIn / fadeOut动画，并在mouseleave上返回动画。如何停止动画并冻结实际的div？

Answer 1

您可以使用一个类来确定何时应该显示间隔。通过在悬停时将其添加和删除并将其悬停，则间隔可以检查元素是否具有该类。如果他们有课程，请跳过该时间间隔的操作。

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>

鼠标悬停时停止jQuery函数淡入

1 个答案: