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')){ //判斷元素是否正處於動畫狀態
//如果當前沒有進行動畫，則添加新動畫
}