CODEWITHSUNDEEP
jqueryhoverjquery-hover
HGPB
HGPB

Reputation: 4366

Using jquery hover event

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.

Upvotes: 2

Views: 1621

Answers (3)

iMatoria
iMatoria

Reputation: 1448

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();
});

Upvotes: 1

Jepser Bernardino
Jepser Bernardino

Reputation: 1372

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/

Upvotes: 7

Tesserex
Tesserex

Reputation: 17314

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

Upvotes: 3

Related Questions