文本在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（）函数将停止所有排队的动画。