Стоп jquery функция исчезает при наведении курсора - PullRequest
Новая
       10

Стоп jquery функция исчезает при наведении курсора

0 голосов
/ 30 мая 2019

У меня есть html-код, подобный следующему: 

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

И функция fadein / fadeout для этих "кавычек" 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) 
    })

Проблема в том, что яхотите остановить анимацию fadeIn / fadeOut при наведении курсора мыши на элементе «Principal» и вернуть анимацию при отпускании мыши.Как я могу остановить анимацию и заморозить фактический div?

1 Ответ

1 голос
/ 30 мая 2019

Вы можете использовать класс, чтобы определить, когда должен появиться интервал.Добавляя и удаляя его при наведении и наведении, интервал может проверить, есть ли у элементов класс или нет.Если у них есть класс, пропустите операцию в этом интервале. 

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>
...