工作中遇到过的实际案例:
1、我在项目里做的一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏
如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。
2、项目里ng-click 点击事件,然后让一个div弹窗淡入淡出,(即,当连续多次点击按钮触发事件,就会产生点击事件多次点击后)就会产生“动画积累",当多次点击按钮完成后,积累的动画还会持续执行,直到动画序列执行完毕。
解决方法:在写动画效果的代码前加入stop(
true
,
true
),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)
$scope.sendMsg = function($event){ $event.stopPropagation(); $('.add').stop(true,true).fadeIn(500); $('.add').stop(true,true).delay(2000).fadeOut(1000); }