jQuery动画停止--$.shop()方法使用

Posted 2021-09-09 墨明奇妙v

（1）知识点：

.stop( [clearQueue],[jumpToEnd] )：方法停止当前正在运行的动画。

clearQueue: 布尔值，默认是 false;此值处理是相关的动画队列是否移除，如果为 false 时，则停止当前的动画，后面的动画按队列进行。如果为 true,则全部移除动画
jumpToEnd: 布尔值，默认是 false,此值处理的是相关动画是立即完成还是按队列顺序完成，如果为 false,则按队列顺序完成，如果为 true,即立即完成完成队列的动画。

例子：
.stop(): 停止当前的动画（即第一个动画队列），其余的按队列顺序执行
.stop(false, true)：停止当前的动画（即第一个动画队列），其余的动画立即完成
.stop(true, true)：停止当前的动画（即第一个动画队列），并移除其余的动画队列
.stop(false, false)与.stop() 一样
.stop(true, false)：停止当前的动画，并移除其余的动画队列 

---

（2）开发中出现的问题、解决方案

原始代码：

$('#box').on('mouseover',function(){
	$(this).animate({
		width:"100px",
		height:"100px"
	},500);
})
$('#box').on('mouseout',function(){
	$(this).animate({
		width:"50px",
		height:"50px"
	},500);
})

问题：  当盒子短时间内重复获取和失去焦点时，造成很多动画排队中，最后鼠标停止不动的时候，动画依旧在进行，造成延迟性持续做动画效果，用户体验差。

解决方案：  无论获取还是失去焦点之前先停止当前动画，则在执行动画之前都会把之前动画给停止了，不会造成动画排队情况。

$('#box').on('mouseover',function(){
	$(this).stop().animate({
		width:"100px",
		height:"100px"
	},500);
})
$('#box').on('mouseout',function(){
	$(this).stop().animate({
		width:"50px",
		height:"50px"
	},500);
})