Using jquery hover event

Question

I have a jquery hover event that fires as you hover over an element. Trouble is, if you hover over the element multiple times it queues up the event sometimes leaving the element flashing for well, minutes depending how quick and for how long you hover over and hover out the element. I want to stop the propagation of the event so this queuing is eliminated.

$('.pui-search-item').hover( function() {
        $(this).find('.pui-actions').show('fade');
    }, function(){
        $(this).find('.pui-actions').hide('fade');

    });

How would I go about this, i have tried the various propagation functions with no effect.

Thanks in advance.

Does pui-search-item a list?

SIFE
– SIFE

2011-05-13 13:14:44 +00:00
Commented May 13, 2011 at 13:14 — SIFE
– SIFE, Commented May 13, 2011 at 13:14

Jepser Bernardino · Accepted Answer · 2011-05-13 13:15:03Z

7

Try this:

$('.pui-search-item').hover( function() {
        $(this).find('.pui-actions').stop(true, true).show('fade');
    }, function(){
        $(this).find('.pui-actions').stop(true, true).hide('fade');

    });

Here is more info about stop() http://api.jquery.com/stop/

answered May 13, 2011 at 13:15

Jepser Bernardino

1,3701 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tesserex · Accepted Answer · 2011-05-13 13:14:19Z

3

Add a stop(true) function call before the animation, so it resets the queue.

answered May 13, 2011 at 13:14

Tesserex

17.3k6 gold badges72 silver badges108 bronze badges

4 Comments

HGPB Over a year ago

Genius - thank you - now fixed with: $(this).find('.pui-actions').stop(true,true).show('fade');

Tesserex Over a year ago

@Haraldo remember that the second parameter controls whether it jumps. Personally I would leave it false so that it shows or hides starting from its current opacity.

easwee Over a year ago

Is this more solid and smooth than using hoverIntent plugin or maybe setting and interval?

Tesserex Over a year ago

@easwee It's certainly easier, and if it looks about the same I would stick with it. I've never used a plugin for it.

iMatoria · Accepted Answer · 2011-05-13 13:17:54Z

1

Try this link.

Your implementation shall change to:

$('.pui-search-item').hover(function() {
  $(this).find('.pui-actions').stop(true, true).fadeOut();
}, function() {
  $(this).find('.pui-actions').stop(true, true).fadeIn();
});

answered May 13, 2011 at 13:17

iMatoria

1,4482 gold badges19 silver badges35 bronze badges

Collectives™ on Stack Overflow

Using jquery hover event

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related