I'm currently working on implementing a SVG path animation that activates on hover and reverses when the mouse is moved away.
How can I pause the animation if the mouse moves out before the initial animation completes, and then reverse it from that point?
In addition, if the animation is already in reverse and the user hovers over it midway through, I'd like the reversed animation to stop and resume forward from that spot.
Check out this Fiddle for an example
Currently, I am also utilizing jQuery to add attributes to the elements. Is it necessary to use only CSS to achieve this effect?
$(document).ready(function() {
$('svg').hover(function() {
/* Code to execute when mouse enters element */
$(this).find('circle').fadeIn(100);
$(this).find('circle').attr("class", "social-circle movingCirc");
console.log('on');
}, function() {
/* Code to run when mouse leaves element */
$(this).find('circle').attr("class", "social-circle removingCirc");
$(this).find('circle').delay(1900).fadeOut(100);
console.log("out of hover");
});
});
Thank you for any assistance!