Jojo Jojo - 9 days ago 7
jQuery Question

Prevent event on $(this) element

A few given HTML articles like:

<article id="someId" class="some_wrapper">
<section class="info_wrapper">
<section class="info">
<p>Content</p>
</section>
</section>
</article>


Cobined with some basic Jquery like:

$(".some_wrapper").mouseenter(function(){
$(this).find(".info").fadeIn(500);
});

$(".some_wrapper").mouseleave(function(){
$(this).find(".info").fadeOut(500);
});


Problem: If the user moves the mouse fast severel times from on
.some_wrapper
to another, the eventhandlers fire multiple times and build a queue of
fadeIn()
and
fadeOut()
effect. Those occure as long as often the handler fired, even if the mouse already stand still outside the containers.

How can I prevent the events
mouseenter()
and
mouseleave()
on
$(this)
element where the
.info
is visible. Or break the queue?

Thanks.

Answer

You need to use stop() function before trigger fadeIn or Out event

$(".some_wrapper").mouseenter(function(){
    $(this).find(".info").stop().fadeOut(500);
    $(this).find(".info").fadeIn(500);
});

$(".some_wrapper").mouseleave(function(){
    $(this).find(".info").stop().fadeIn(500);
    $(this).find(".info").fadeOut(500);
});

This will stop all previous fired event and execute latest event.So repeatation not occured.