jQuery animate出现迟滞现象

Question

我想用jQuery实现一个鼠标移入后div变宽,移出恢复原长度的效果,但如果鼠标移入移出的速度太快的话会发现动画与事件不同步,如果单用jQuery实现这一个效果该如何解决这个问题.测试代码:http://jsfiddle.net/Aufreek/Tp7ZR/如果加上stop的话,虽然能够使动画和事件同步,但移入移出的animate效果就没了

Answer 1

animate 方法的第二参数为可选的时间参数，单位为毫秒。

其实出现题主所描述现象的原因就在于 animate 方法执行的时间比题主所说的 “鼠标移入移出的速度太快” 的时间要长，所以解决的方法就是把 animate 方法时间缩短到比 “鼠标移入移出的速度太快” 的时间短即可，此时就不会再出现不同步的现象，但同时由于时间缩短，速度增快，动画效果也会相应减弱。

举个极端例子，把时长参数设定为 1 毫秒：

$('div').mouseover(function(){

    $(this).animate({width:'300px'}, 1);

    $('div').mouseout(function(){

        $(this).animate({width:'100px'}, 1);

    })

})

此时无论你鼠标移入移出的速度有多快也不会造成不同步现象。

至于具体缩短至多少秒，应该根据题主你想要达到的效果而定，可以自行测试后选值。