Jquery巧用stop()方法防止鼠标移入移出太快导致动画反复执行情况

很多时候需要停止匹配元素正在进行的动画，比如，当鼠标选入元素时显示菜单，鼠标离开时隐藏下拉菜单，如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况，此时stop()就派上用场了

stop()方法的语法结构为：

stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选参数，为Boolean值（true或false）。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

1、直接使用使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。比如下面例子：

<!-- html部分 -->
<div id="panel" style="width: 60px;height: 22px;background-color: #eee;border: 1px solid #abcdef;font-size: 12px;">汪大海的博客</div> 
<!-- 引入jquery库 -->

/* js部分 */
$("#panel").hover(function() {
	$(this).stop().animate({height: "150"}, 200);
},function() {
	$(this).stop().animate({height: "22"}, 300);
});

此时，在光标移入时，触发光标移入动画（在0.2秒内height变为150），在动画还没执行完的时候光标移出，则停止当前动画（可能height还未到达150），执行光标移出触发的动画（在0.3秒内height变回22）。反之亦然。

如果遇到组合动画，例如：

$("#panel").hover(function() {
	$(this).stop()
		.animate({height: "150"}, 5000)       //如果在此时触发了光标的移出事件
											  //将执行下面的动画
		.animate({borderWidth: "20px"},3000); //而非光标移出事件中的动画
},function() {
	$(this).stop()
		.animate({width: "300"}, 2000)
		.animate({fontSize: "24px"},3000);
});

此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段（改变height的阶段），则触发光标移出事件后，只会停止当前的动画，并继续进行下面的.animate({borderWidth: “20px”},3000)动画，而光标移出事件中的动画要等这个动画结束后才会继续执行，这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。

2、stop(true)，此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码，就能实现预期的效果。

$("#panel").hover(function() {
	$(this).stop(true)
		.animate({height: "150"}, 5000)       //如果在此时触发了光标的移出事件
											  //直接跳过后面的动画队列
		.animate({borderWidth: "20px"},3000); 
},function() {
	$(this).stop(true)
		.animate({width: "300"}, 2000)
		.animate({fontSize: "24px"},3000);
});