Question

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

问题是，当你对它进行治疗时，这很有效。＆＃34;很好地＆＃34;。如果您将鼠标平稳地移动到侧边栏中，它会正确打开，如果您将鼠标移到外面，它就会正常关闭。但是，如果您在完成动画制作之前快速将鼠标移入，移出和移回侧边栏，则内部文本会消失。除非您刷新页面，否则它不会再出现。

我怀疑这是底层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（）函数将停止所有排队的动画。

文本在jQuery-animated div中消失

1 个答案: