博客历史数据正在恢复中!

青衿博客

jquery 快速触发.hover()方法造成动画积累闪动的解决方法
标题有点绕,具体看效果(请把鼠标在一级导航上迅速滑动N次):

See the Pen jquery.hover() bug by qingjin (@mqhe2007) on CodePen.

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

.stop([clearQueue],[jumpToEnd])

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代码体验一下。
2016-08-17 18:36:12 青衿 写于 4 年前
啥也没说!