jQuery动画div中的文本消失

Question

我创建了一个侧边栏菜单，当鼠标悬停在该菜单上时，它会向外扩展。当菜单展开时，里面的文字同时淡入。同样，当鼠标离开菜单时，它收缩，里面的文字淡出。我这里有一个 JS 小提琴：http://jsfiddle.net/6LdcC/4/

问题是，当你“很好地”对待它时，它会起作用。如果将鼠标平滑地移动到侧边栏，它会正确打开，如果然后将鼠标移到侧边栏，它会正确关闭。但是，如果您在完成动画之前将鼠标快速移入、移出和移回侧边栏，则里面的文本会消失。除非您刷新页面，否则它不会再次出现。

我怀疑这是底层 jQuery 中的一个错误，但我很想弄错，以便我可以修复它。有谁知道是什么导致了这种行为？

为方便起见，相关代码也在这里：

$('#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

在每个动画之前放置 stop() 函数。

像这样：

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

stop() 函数将停止所有排队的动画。