Geek asks and answers

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

I use the method below to do some animation. But when I move the mouse very quickly and stop it inside div, it fadeIn()doesn't work, but divremains transparent.

$(".grids").hover(function() {
    $('.gridscontrol').stop().fadeIn(200);
}, function() {
    $('.gridscontrol').stop().fadeOut(200);
});
+5
source share
2 answers

.stop()without parameters, it just stops the animation, leaving it in the queue. In this case, you want to .stop(true)also clear the animation queue.

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

Also note the use of .fadeTo()as .fadeIn()and .fadeOut()labels have some undesirable behavior here. Here you can see a working example .

+14
source

. stop ([clearQueue] [, jumpToEnd])

clearQueue, jumpToEnd true.

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

More articles:


All Articles