Как остановить анимацию velocity.js после завершения анимации?

Question

Я создаю пульсирующий эффект с speed.js как резерв для IE9 (см. Вставку2 для анимации CSS). Когда мышь покидает поле перед завершением анимации (оставайтесь до тех пор, пока импульс не вырастет, а не переместится) пульсирующий элемент останется видимым. https://jsfiddle.net/02vu80kc/1/

 $(".box").hover(function() { 

      $(this).find('.effect-holder').velocity({ 
       scale: [1.2, 0.9], 
       opacity: [1, 0] 
      }, { 
       easing: 'ease-out', 
       duration: 800, 
       loop: true 
      }, { 
       queue: false 
      }).velocity("reverse"); 

     }, function() { 

      $(this).find('.effect-holder').velocity("stop"); 


     }); 

Как остановить анимацию на отведении указателя мыши после того, как эффект закончил?

Я стараюсь держаться подальше от .removeAttr('style') и хотел бы, чтобы анимация закончилась и остановилась. Любая помощь приветствуется.

Если я использую этот

$(this).find('.effect-holder').velocity('reverse').velocity("stop"); 

и вы двигаете мышь быстро анимация начинается снова, а иногда и пауз между ними.

Answer 1

Либо использовать .velocity("finish") вместо .velocity("stop") или имеют различные включения и выключения анимации, с как анимации вызова "stop" (то есть, поймать, когда мышь движется должным образом).

отметить также, что {... loop:true ...} означает, что первая анимация никогда не заканчивается, и, следовательно, "stop" будет иметь «обратный» произойдет сразу же после остановки (вызов .velocity("stop", true), чтобы предотвратить это)

редактирования: Открытый вопрос о "finish" ошибке - https://github.com/julianshapiro/velocity/issues/495

edit2: Добавить простой пример:

$("box").hover(function() { 
    // over 
    $(this).velocity("stop", true).velocity({ 
     scale: [1.2, 0.9] 
    }, { 
     duration: 800, 
     loop: true 
    }) 
}, function() { 
    // out 
    $(this).velocity("stop", true).velocity({ 
     scale: 0.9 
    }, { 
     easing: "ease-out", 
     duration: 800 
    }) 
});