Currently, I am tackling my first JQuery project and facing a challenge. As the user mouseleaves the .container, the animation does not reset but continues as if they are still within it. My goal is to have the animation revert in reverse if the user decides to exit the container midway through. How can I achieve this?
$( document ).ready(function() {
$('#facial span').fadeOut(0);
$('.container').mouseenter(function(){
// When the mouse enters the .container, #facial slides to the center of .container.
$('#facial').animate({right: '25%'})
// After sliding to the center, #facial pauses for 500ms.
.delay(500)
// Following the delay, #facial expands its width to 100% of .container.
.animate({right: 0, width: '100%'});
// Display the span link at the bottom as an H2 with center alignment.
$('span').fadeIn(600);
});
$('.container').mouseleave(function(){
// Mouse leaves .container, and span fades out gradually.
// $('span').css('display','none');
$('span').fadeOut(500);
// Mouse leaves the .container, #facial shrinks its width to 50%.
// #facial slides back to the right of .container.
$('#facial').animate({right: 0, width: '50%'});
});
});
Check out my Demo for a better understanding.