Fast Mouseenter/Mouseleave messes up animation

Question

Another fast mouse hover animation problem.

I've got 3 hoverable divs that return html() text when hovered - HTML:

<div id="hoverableDivs_container" class="hoverableDiv">
    <div id="hoverableDiv1" class="hoverableDiv"><p>Hoverable<br>div 1</p></div>
    <div id="hoverableDiv2" class="hoverableDiv"><p>Hoverable<br>div 2</p></div>
    <div id="hoverableDiv3" class="hoverableDiv"><p>Hoverable<br>div 3</p></div>
</div>

<div id="infoBox">
    <p>InfoBOX</p>
    <div id="infoBox_inactive"></div>
    <div id="infoBox_active"></div>
</div>

FIDDLE.

If I:

fast mouseenter/mouseleave the hoverable divs it gets all messed up.
hover from one div to the other it gets all messed up

I've tried stop() in every imaginable way, but can't get it to work properly (I removed the stop()s for now).

The only way it works is to mouseenter/mouseleave slowly, in the same div (in and out and back in).

Help, please.

Pedro

Techie Techie · Accepted Answer · 2013-05-31T09:41:37

Use .stop() method before every animate method. If it is called on an element, the currently-running animation (if any) is immediately stopped.

See the work Fiddle here.

For better optimised code, Try removing .stop() and see where it get messed up and leave where it required. I have added .stop before animation method for the sake of easiness.

Fast Mouseenter/Mouseleave messes up animation

1 Answers