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.

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/

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

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