jQuery--停止动画和判断是否处于动画状态stop()
stop()--语法结构stop（[clearQueue],[gotoEnd]）。
clearQueue和gotoEnd都是可选参数，为Boolean（true或者false）
1、直接使用stop(),会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #panel{ position: relative; width: 100px; height: 100px; border:1px solid black; background: red; cursor: pointer; opacity: 0.5; } </style> <script type="text/javascript" src='jquery-3.2.1.min.js'></script> <script type="text/javascript"> $(function(){ $('#panel').hover(function(){ $(this).stop().animate({height:'150px',width:'300px'},2000); },function(){ $(this).stop().animate({height:'22px',width:'60px'},3000); }); }); </script> </head> <body> <div id="panel"></div> </body> </html>
如果遇到组合事件，将执行下面的动画，而非光标移出事件中的动画
$(function(){
$('#panel').hover(function(){
$(this).stop()
.animate({height:'150px'},2000)//如果在此时触发了光标移出事件，将执行下面的动画，而非光标移出事件中的动画
.animate({width:'300px'},3000);
},function(){
$(this).stop()
.animate({height:'22px'},3000)
.animate({width:'60px'},2000);
});
});
要跳出鼠标移入触发的事件，需要给stop传递一个参数 true
$(function(){
$('#panel').hover(function(){
$(this).stop(true)
.animate({height:'150px'},2000)//如果在此时触发了光标移出事件，直接跳过后面的动画队列，执行光标移出事件中的动画
.animate({width:'300px'},3000);
},function(){
$(this).stop(true)
.animate({height:'22px'},3000)
.animate({width:'60px'},2000);
});
});
第二个参数（gotoEnd）用于正在执行的动画直接达到结束是的状态
$(function(){
$('#panel').hover(function(){
$(this).stop(true,true)
.animate({height:'150px'},2000)//如果在此时触发了光标移出事件，立刻执行完此次动画并且跳过后面的动画队列，执行光标移出事件中的动画
.animate({width:'300px'},3000);
},function(){
$(this).stop(true,true)
.animate({height:'22px'},3000)
.animate({width:'60px'},2000);
});
});
2、判断元素是否处于动画状态
if(!$(element).is(':animated')){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
