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});

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