jquery 快速触发.hover()方法造成动画积累闪动的解决方法

使用jQuery为导航菜单绑定hover实现动画时，快速反复触发hover方法会造成动画队列积累，导致动画持续闪动执行。可在动画方法前链式调用jQuery的`.stop(true, true)`方法，清空累积的动画队列，即可解决这一问题。

标题有点绕，具体看效果（请把鼠标在一级导航上迅速滑动N次）： See the Pen jquery.hover() bug by qingjin (@mqhe2007) on CodePen.

当我们快速划过多次之后，会造成我们设计的动画效果累加，即便我们不再操作了也会把已触发的动画执行完，网页看起来像疯了一样不受控制，有点懵逼。这个效果用的最多的地方就是导航菜单了，虽然不影响业务，但是作为一个有志向的开发者，这样糟糕的用户交互也是不能容忍的。通过查询jquery API发现有个货叫.stop()。

.stop(,)

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则清空队列并完成当前动画。

我们利用的就是两个参数配合，首先第一个参数清空队列，第二个参数清空的同时又完成当前动画，所以从整个交互来说在当前动画之后累积的动画都给清空了。把我们的代码在动画之前加上“.stop( true, true )”，修改如下： $(".menu>li").hover(function() { $(this).find('.sub-menu').stop( true, true ).slideDown(200) }, function() { $(this).find('.sub-menu').stop( true, true ).slideUp(200); }); 现在连续触发就不会造成动画累积了，大家可以修改opencode代码体验一下。