Эффект покачивания при наведении курсора: как остановить функцию самовызвания при отпускании мыши? - PullRequest
Новая
       11

Эффект покачивания при наведении курсора: как остановить функцию самовызвания при отпускании мыши?

0 голосов
/ 12 февраля 2019

Я пытаюсь воспроизвести извивающийся текст, найденный в состояниях наведения, размещенных на веб-сайте Bureau.cool в нижней части информационной страницы https://bureau.cool/#!/info

Вот где я сейчас нахожусь: https://codepen.io/isaidicanshout/pen/QYxxJV

Первоначально я пытался использовать CSS-анимацию с классом добавления / удаления, который имел желаемый эффект, КРОМЕ этого эффекта сразу "включался" и выключался, а не останавливался / начинался плавно.

Итак, я начал с нуля, используя бесконечную повторяющуюся функцию, которая переключает класс transform: scaleY снова и снова, однако у меня возникают проблемы с остановкой функции после прекращения зависания.

MyВопрос: Как мне создать функцию, которая повторяется вечно, когда завис, но останавливается сразу после прекращения зависания? 

// MAKES WORDS WIGGLE ON HOVER
function wiggler() {
  // Hover on .wiggle class
  $('.wiggler').hover(function(index) {
    var currentHover = $(this);
    console.log(currentHover);
    function repeatForever() {
      // Finds all spans inside the hovered element, does something after a pause
      // uses jquery-timing.min.js
      $(currentHover).children('span').each($).wait(15, function(index) {
        // Toggle the animation class
        $(this).toggleClass('ani');
      });
      // repeats forever
      window.setTimeout(repeatForever, 300);
    };
    // starts the loop
    repeatForever();
  },function() {
    var currentHover = $(this);
    console.log(currentHover);
    $(currentHover).children('span').each($).wait(15, function(index) {
      // trying to stop it from happening, but to no avail
      $(this).clearQueue().removeClass('ani');
    });
  });
};

1 Ответ

0 голосов
/ 12 февраля 2019

вам нужно очистить тайм-аут, чтобы избежать бесконечного цикла: 

function wiggler() {
  //note that I use this here but you could use a standard variable
  this.timeout = null
  let _this = this
  $('.wiggler').hover(function(index) {
      ...
      function repeatForever() {
       ...
         _this.timeout = window.setTimeout(repeatForever, 300);
       }
    };
    // starts the loop
    repeatForever();
  },function() {
    ...
    if (_this.timeout) window.clearTimeout(_this.timeout)
  });
};
...