jQuery animate出现迟滞现象

Question

我想用jQuery实现一个鼠标移入后div变宽,移出恢复原长度的效果,但如果鼠标移入移出的速度太快的话会发现动画与事件不同步,如果单用jQuery实现这一个效果该如何解决这个问题.

测试代码:

http://jsfiddle.net/Aufreek/Tp7ZR/

如果加上stop的话,虽然能够使动画和事件同步,但移入移出的animate效果就没了

Answer 1

亚马逊有个很著名的交互细节：商品类目菜单鼠标在左侧停留，向右侧内容移动时，短暂经过其他类目的时候也不会导致类目切换。（刚刚看了一下京东易迅1号店都学去了）

这里其实可以类似处理，jQ动画默认的是400ms，可以延迟比如200ms触发动画

http://jsfiddle.net/Tp7ZR/2/

看一下这个效果是不是你想要的。顺便，随手把几个不好的细节改正了

Answer 2

一般碰上这种问题的时候我都是用CSS解决了...虽然题主你要的是jQuery的答案，哈哈哈哈～

http://jsfiddle.net/t9y7h/

Answer 3

谢邀。
animate 方法的第二参数为可选的时间参数，单位为毫秒。
其实出现题主所描述现象的原因就在于 animate 方法执行的时间比题主所说的 “鼠标移入移出的速度太快” 的时间要长，所以解决的方法就是把 animate 方法时间缩短到比 “鼠标移入移出的速度太快” 的时间短即可，此时就不会再出现不同步的现象，但同时由于时间缩短，速度增快，动画效果也会相应减弱。
举个极端例子，把时长参数设定为 1 毫秒：

$('div').mouseover(function(){
    $(this).animate({width:'300px'}, 1);
    $('div').mouseout(function(){
        $(this).animate({width:'100px'}, 1);
    })
})

此时无论你鼠标移入移出的速度有多快也不会造成不同步现象。
至于具体缩短至多少秒，应该根据题主你想要达到的效果而定，可以自行测试后选值。