Question

I’m trying to set up a pretty basic hover animation in jQuery. Mouse over a div and the major content is slid down, mouse up and it slides up.

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').slideToggle('slow');
        });
    });</script>

This piece of code works fine, but the obvious problem is the animation queuing if you mouse in and out really quickly.

To alleviate this I have read that the .stop(true) function placed before the .slideToggle() stops the previous animation and clears the animation queue. So I tried this code:

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').stop(true).slideToggle('slow');
        });
    });</script>

My problem now is that this only seems to work on the first mousein and mouseout. After that the animations no longer trigger and nothing happens. This is Google Chrome DEV channel.

This seems to be exacerbated by how fast you move the mouse in and out.

I can’t seem to work out what the issue is, this JSFiddle has a working (and breaking on my computer) example.

EDIT: I suspect this is a bug in jQuery 1.4.2 and have lodged a bug ticket: http://dev.jquery.com/ticket/6772

Answer 1

try

.stop(true,true)

---

or you can use this hoverIntent plugin