停止 jquery 函数在鼠标悬停时淡入淡出

Question

我有这样的 html 代码：

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

fadein/fadeout 那些 "quote" div 的循环函数：

  jQuery(function () {
    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;

        $els.slice(1).hide();
        setInterval(function () {
            $els.eq(i).fadeOut(function () {
                i = (i + 1) % len
                $els.eq(i).fadeIn();
            })
        }, 4000) 
    })

问题是：我想在 "Principal" div 上停止鼠标悬停时的 fadeIn/fadeOut 动画和 return 鼠标离开时的动画。我怎样才能停止动画并冻结实际的 div?

Answer 1

您可以使用 class 来确定间隔何时出现中断。通过在悬停和悬停时添加和删除它，间隔可以检查元素是否具有 class 。如果他们有class，则跳过该间隔的操作。

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 函数在鼠标悬停时淡入淡出

Stop jquery function fade on mouseover

javascript

jquery

html

spotfire