我创建了一个侧边栏菜单,当用鼠标悬停时,它会向外扩展。 菜单展开时,其内部的文本同时淡入。同样,当鼠标离开菜单时,其收缩,而内部的文本淡出。 我在这里有一个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
    });
});

===============>>#1 票数:1 已采纳

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

像这样:

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

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

  ask by ireardon translate from so

未解决问题?本站智能推荐: