CODEWITHSUNDEEP
javascriptjqueryhtmlcss
StinkyTofu
StinkyTofu

Reputation: 223

Jquery - How to reset Animation in the middle of it's current animation?

I'm working on my first JQuery project, and i'm trying to figure out how to reset my animation if the user decides to mouseleave the .container. Right now if the user mouseleaves the .container the animation will continue through as if they are still inside the .container. I would like it to revert it's animation in reverse if the user decides to leave the container in mid animation. How can i make this possible? 

$( document ).ready(function() {
    $('#facial span').fadeOut(0);
    $('.container').mouseenter(function(){
        // When mouse enters the .container, #facial slides to center of .container.
        $('#facial').animate({right: '25%'})
        // After #facial slides to center it delays for 500ms.      
                    .delay(500)
        // After #facial delays it expands it's width to 100% of .container.
                    .animate({right: 0, width: '100%'});
        // show the span link at bottom as a H2 with center aligned.
        $('span').fadeIn(600);
    }); 


    $('.container').mouseleave(function(){
       // Mouse leaves .container, and span fades out slowly.
      // $('span').css('display','none'); 
       $('span').fadeOut(500);
       // Mouse leaves the .container, #facial shrinks it's width to 50%.
       // #facial slides back to right of .container.
       $('#facial').animate({right: 0, width: '50%'});

   }); 
});

Here is my Demo

Upvotes: 0

Views: 64

Answers (2)

guest271314
guest271314

Reputation: 1

Try using .stop(true, true, true)

var $view = $('<a href="x">View</a>');

$( document ).ready(function() {
    $('#facial span').fadeOut(0);
    $('.container').mouseenter(function(){
        // When mouse enters the .container, #facial slides to center of .container.
        $('#facial').animate({right: '25%'})
        // After #facial slides to center it delays for 500ms.      
                    .delay(500)
        // After #facial delays it expands it's width to 100% of .container.
                    .animate({right: 0, width: '100%'});
        // show the span link at bottom as a H2 with center aligned.
        $('span').fadeIn(600);
    }); 


    $('.container').mouseleave(function(){
       // Mouse leaves .container, and span fades out slowly.
      // $('span').css('display','none'); 
       $('span').stop(true, true, true).fadeOut(500);
       // Mouse leaves the .container, #facial shrinks it's width to 50%.
       // #facial slides back to right of .container.
       $('#facial').stop(true, true, true).animate({right: 0, width: '50%'});

   }); 
});

jsfiddle https://jsfiddle.net/sy4pv8z3/57/

Upvotes: 1

Andreas Poulsen
Andreas Poulsen

Reputation: 101

You can use jQuery's stop(true) method which cancels all current and queued animations.

See this update jsFiddle

Upvotes: 2

Related Questions