[jQuery] Hover In/Out with quick mouse movements

[davebowker]

So I have this bug...

I have an initial div set to hide on document init, and fadeIn when I
hover over the parent div, then fadeOut when I hover back out of the
parent div.

When I move the mouse fast in and out of the parent div, the child div
seems to queue up the movements so after I stop moving the mouse, the
fadeIn and fadeOut effects keep running until they have caught up with
the mouse movements. Any ideas how to fix this? Still getting my head
around jQuery and javascript, so any help would be greatly
appreciated.

Here's my code:

$(document).ready(function() {
        $('.prev, .next').hide();

        $('#topbar').hover(function() {
                $('.prev, .next').fadeIn('slow');
        },
        function() {
                $('.prev, .next').fadeOut('slow');
        });
});