Question

I am currently trying to create some sort of label that when you hover over will expand to show the user more information. The problem I’m having though is that when a user quickly hovers over the item multiple times, the event queue builds up and so the animation occurs multiple times.

I would like it that when the user hovers over the label, the hover event will be somehow disabled until the label info has been hidden again. I’ve tried using .stop() and event.stopPropagation() but neither of these had the desired effect. Does anyone have any other ideas?

My code can be seen below:

$('.label').mouseenter(function(){
    $('.label-info').slideDown('slow');
});

$('.label').mouseleave(function(){
    $('.label-info').slideUp('slow');
})

Answer 1

Use .stop():

http://api.jquery.com/stop/

Description: Stop the currently-running animation on the matched elements.

So your code should look like this:

$('.label')
.mouseenter(function(){
    $('.label-info').stop(1,1).slideDown('slow');
})
.mouseleave(function(){
    $('.label-info').stop(1,1).slideUp('slow');
})

Note that it is unwise to use only a class selector if you are targeting IE 7 and below.