CODEWITHSUNDEEP
jqueryjquery-animate
Walrus
Walrus

Reputation: 20484

JQuery Stop() method for animation

I need a way of stopping an animation that is triggered on mouse enter() in it's tracks if the mouse leave(). At the moment this code means that if the user scrolls in and then out quickly the animation will complete the mouse enter() animation and then perform the mouse leave() function in order rather than stop it in it's track on mouse leave and animate out from there.

I believe this can be done with the stop() function but I do not know how to use it.

$(".featuredslider a").mouseenter(function(){
        $(this).stop();
        $(this).find('.smallcont').animate({opacity:0},400);
        $(this).find('.bigcont').animate({opacity:1},400);
    });
    $(".featuredslider a").mouseleave(function(){
        $(this).stop();
        $(this).find('.smallcont').animate({opacity:1},400);
        $(this).find('.bigcont').animate({opacity:0},400);
    });

Upvotes: 0

Views: 162

Answers (1)

Manse
Manse

Reputation: 38147

Documentation is here

But it's quite straight forward, i believe you want something like :

$(".featuredslider a").mouseenter(function(){
    $(this).find('.smallcont').stop().animate({opacity:0},400);
    $(this).find('.bigcont').stop().animate({opacity:1},400);
});
$(".featuredslider a").mouseleave(function(){
    $(this).find('.smallcont').stop().animate({opacity:1},400);
    $(this).find('.bigcont').stop().animate({opacity:0},400);
});

This will stop any animations already started on each object then start the animate() function after the stop()

Upvotes: 1

Related Questions