CODEWITHSUNDEEP
jqueryanimationhover
chbdetta
chbdetta

Reputation: 152

How to use stop() properly in jQuery animation with hover event?

I use the method below to make some animation. But when I move my mouse in and out really fast and stop it inside the div , the fadeIn() doesn't work and the div keeps transparent.

$(".grids").hover(function() {
    $('.gridscontrol').stop().fadeIn(200);
}, function() {
    $('.gridscontrol').stop().fadeOut(200);
});

Upvotes: 6

Views: 15200

Answers (2)

Nick Craver
Nick Craver

Reputation: 630607

.stop() without parameters simply stops the animation, still leaving it in queue. In this case you want .stop(true) to clear the animation queue as well.

$(".grids").hover(function() {
  $('.gridscontrol').stop(true).fadeTo(200, 1);
}, function() {
  $('.gridscontrol').stop(true).fadeTo(200, 0);
});

Also note the use of .fadeTo() since .fadeIn() and .fadeOut() shortcuts have some undesirable behavior here. You can see a working example here.

Upvotes: 16

xdazz
xdazz

Reputation: 160943

.stop( [clearQueue ] [, jumpToEnd ] )

Set both clearQueue and jumpToEnd to true.

$(".grids").hover(function() {
    $('.gridscontrol').stop(true, true).fadeIn(200);
}, function() {
    $('.gridscontrol').stop(true, true).fadeOut(200);
});

Upvotes: 2

Related Questions