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

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

1回复

jQuery UI动画不起作用?

我已经花了很多力气用jQueryUI构建了一个滑块(请参阅此处 ),但是我有<ul>标签的细微问题,它不再像以前那样随着动画滑动了吗? 我想使用手柄并平稳地观看<ul>滑动,但是我能想到的代码没有使它起作用吗? 有任何想法吗? 在此测试页面样本。 我真正希望的
3回复

div在边缘和宽度动画问题上消失 - jquery

我已经将我的div编码为重新调整大小并在点击id = switch的div时更改边距。 但它在动画开始时消失,并在动画完成时重新出现。 Ypu可以在这里看到我的小提琴。 为什么会这样,我怎么能避免这种情况? 在此先感谢... :) blasteralfred
2回复

jQuery的动画股利宽度= 0 =不工作

我的页面上有div,如下所示; div switch是一个用来缩小sidebar和拉伸viewer的按钮。 我希望sidebar完全缩小到左侧,并将viewer拉伸到剩余空间。 但是我仍然有5px的空白。 你可以在这里看看我的小提琴。 我该如何解决? 在此先感谢... :)
6回复

jQuery在悬停时改变(使用淡入淡出动画)div的背景图像

我试图用jQuery在悬停时更改div的背景图像。 这是我到目前为止所提出的,然而,它不起作用: HTML CSS JS jsfiddle : http : //jsfiddle.net/26j6P/1/ 我究竟做错了什么? 如果我为背景颜色设置动画,它就
1回复

如何反转JQuery动画

一般来说,我对JQuery和Web开发人员是新手,我需要一些帮助。 我已经搜索了几天,但似乎找不到有效的解决方案。 我在这里看到过很多相同的问题,但是许多答案已被指定为当前版本的JQuery中已过时。 基本上,我有一个“ div”,我想在单击它时将其聚焦在屏幕中间。 这部分工作正常。
2回复

jQuery动画功能-隐藏和拉伸div

我有一个页面,divs为; id switch是一个触发器,用于切换动画。 第一次单击时,应将sidebar的宽度缩小到5px, list的宽度缩小到0px, switch的左边距缩小到5px, viewer的左边缩小到5px。 当用户再次单击触发器时,一切都可能返回到先前的状态和位
2回复

当div结束时,jQuery Animate无法正常工作

我有要制作动画的图像列表: 使用此CSS: 列表项是通过Javascript创建的,动画效果很好。 我还通过javascript将所有width值( .PhotoHolder和.PhotoList )设置为所有图像的宽度。我想隐藏将要动画化的多余项目。 所以我这样做:
2回复

jQuery在按钮单击时切换div宽度

您好,我想用div拆分页面显示。 下面是我的html代码。 div包装器有800 px divSection有300 px,而divProducts有400px。 我想基于按钮切换屏幕单击显示divSectionInfo全角(800px)/半角(300px)宽度。 请帮我。
3回复

动画问题和jQuery中的大量stop()调用

这是我要执行的操作:我有几个div,其中包含价格,还有一个带有固定最小值的滑块,可以在其中设置最高价格。 这样我就可以过滤股利,因此仅显示价格在滑块范围内的股利。 没有动画就没有问题,只需hide()和show(),但我正在尝试使其平滑。 那是我的代码,这是我的问题:将滑块推到一
4回复

使用jQuery为某些行设置动画

这是我的代码 。 使用Javascript: HTML: 我用javascript构建了我的表,我希望每秒动画几行,但它并不适用于所有行。但是,当我为特定行设置动画时,它可以工作。 谢谢。