Text disappearing in jQuery-animated div

Question

I created a sidebar menu that, when hovered over with the mouse, expands outward. When the menu expands, the text inside of it simultaneously fades in. Likewise, when the mouse leaves the menu it contracts, and the text inside fades out. I have a JS fiddle here: http://jsfiddle.net/6LdcC/4/

The problem is, this works when you treat it "nicely". If you smoothly move the mouse into the sidebar it opens properly, and if you then move the mouse outside it closes properly. However, if you rapidly move the mouse into, out of, and back into the sidebar before it has finished animating, the text inside disappears. It will not reappear unless you refresh the page.

I suspect that this is a fault in the underlying jQuery, but I would love to be wrong so that I can fix it. Does anyone have any idea what could be causing this behavior?

For convenience, the relevant code is here as well:

$('#sidebar').mouseenter(function () {
    var $this = $(this);

    $('#sidebar_content').show({
        'effect': 'fade',
        'duration': 300,
        'queue': false
    });
    $this.animate({ // properties
        'width': '200px'
    }, { // options
        'duration': 400,
        'queue': false
    });
});

$('#sidebar').mouseleave(function () {
    var $this = $(this);

    $('#sidebar_content').hide({
        'effect': 'fade',
        'duration': 300,
        'queue': false
    });
    $this.animate({ // properties
        'width': '25px'
    }, { // options
        'duration': 400
    });
});

Answer 1

Before each animate place the stop() function.

So like this:

$this.stop().animate({'width': '200px'}, {options 'duration': 400, 'queue': false});

The stop() function will stop all the queued animations.