jQuery stop()

admin發表於2017-02-17
jQuery

此方法停止匹配元素當前正在執行的動畫。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.stop([clearQueue ] [, jumpToEnd ])

引數解析:

（1）.clearQueue:可選，規定是否停止動畫佇列中的所有動畫，如果為true，則停止所有動畫，如果為false，則停止當前動畫，繼續完成佇列中的其他動畫，預設值是false。

（2）.jumpToEnd:可選，規定是否完成當前正在執行的動畫，如果為true，則不會按照原來既定的規則完成當前動畫，而是立馬完成當前動畫，預設值是false。

jQuery1.2版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.stop([queue ] [, clearQueue ] [, jumpToEnd ])

引數解析:

（1）.queue:可選，規定停止動畫佇列的名稱，此引數一般不用使用。

（2）.clearQueue:可選，規定是否停止動畫佇列中的所有動畫，如果為true，則停止所有動畫，如果為false，則停止當前動畫，繼續完成佇列中的其他動畫，預設值是false。

（3）.jumpToEnd:可選，規定是否完成當前正在執行的動畫，如果為true，則不會按照原來既定的規則完成當前動畫，而是立馬完成當前動畫，預設值是false。

jQuery1.7版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
.wrap{ 
  position:relative; 
  height:300px; 
  width:300px; 
  border:5px solid #FCF; 
} 
.wrap div{ 
  position:absolute; 
  left:0;
  top:0; 
  height:50px; 
  width:50px; 
  background:#FA0; 
} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  moveX();
  $('#stopall').click(function(){ 
    $('.wrap div').stop(true); 
  })
  $('#stopdone').click(function(){ 
    $('.wrap div').stop(true,true);
  }) 
  $('#stop').click(function(){ 
    $('.wrap div').stop();
  }) 
})
function moveX(){ 
  $('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000); 
} 
</script>  
</head> 
<body> 
<input type="button" id="stop" value="停止當前動畫"> 
<input type="button" id="stopall" value="停止所有動畫"> 
<input type="button" id="stopdone" value="停止所有動畫，到達終點"> 
<div class="wrap"> 
  <div></div> 
</div> 
</body> 
</html>

上面的程式碼基本演示了stop()函式的作用，下面對上面的三個操作做一下簡單介紹。

先介紹一下什麼是佇列中的動畫:

animate({'left':'250px'},1000).animate({'left':'0px'},1000)動畫佇列，由兩個動畫組成，按照先後順序執行。

（1）.$('.wrap div').stop():預設false，也就是隻會停止當前動畫（且不會以立馬完成當前動畫的形式停止），而不是佇列中的所有動畫。

（2）.$('.wrap div').stop(true)，第二個引數為true，也就是停止佇列中的所有動畫。

（3）.$('.wrap div').stop(true,true)，停止佇列中的所有動畫，且以立馬完成當前動畫的形式停止。

相關文章