Animation problem

HTML

<p>
    Roll slowly over the one, two and three fields. You will see the red lorem ipsum div beeing faded in and out. Now start moving the mouse fast over one two and three, you will see that animation gets stuck somewhere beyond recovery.
</p>
<br />
<ul id="menu">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<div id="slide">Lorem ipsum</div>

CSS

#slide {
    display: none;
    background-color: red;
}

JavaScript

$(document).ready(
    function() {
        $("#menu li").hover(
            function() {
                // fade in the slide, if it is animating stop animation first
                $("#slide").stop(true).fadeIn(1000);
            },
            function() {
                // fade the element out again
                $("#slide").stop(true).fadeOut(1000);
            }
        );
    }
);