For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains visible. 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");
});
How can I stop the animation on mouseout after the effect is complete?
I'd like to avoid using .removeAttr('style') and prefer the animation to finish before stopping it. Any assistance would be appreciated.
If I use this
$(this).find('.effect-holder').velocity('reverse').velocity("stop");
and if you move the mouse quickly, the animation starts again and sometimes pauses in between.