title: How to stop velocity.js animation after the animation is finished?
body: <p>I am creating a pulsating effect with velocity.js as fallback for IE9, (see box2 for CSS animation ) 
  When mouse leaves the box before the animation has finished ( stay until pulse grows than move out ) the pulsating element stays visible. <a href="https://jsfiddle.net/02vu80kc/1/" rel="nofollow">https://jsfiddle.net/02vu80kc/1/</a></p>
  
  <pre><code>        $(".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");
  
  
          });
  </code></pre>
  
  <p>How do I stop the animation on mouseout after the effect has finished ?</p>
  
  <p>I am trying to stay away from <code>.removeAttr('style')</code> and would like the animation to finish and than stop. Any help is appreciated.</p>
  
  <p>If I use this </p>
  
  <pre><code>$(this).find('.effect-holder').velocity('reverse').velocity("stop");
  </code></pre>
  
  <p>and you move the mouse fast the animation begins again and sometimes pauses in between.</p>