jQuery中如何終止動畫-js教程-PHP中文網

jQuery中如何終止動畫

清浅

發布： 2019-01-25 11:06:49

原創

3873 人瀏覽過

可以直接使用stop()函數來立即停止目前正在進行的動畫，這樣做的目的在於防止前一個動畫影響後面動畫的效果

在jQuery中可以透過stop()方法來終止動畫。它一般用於兩個動畫間的切換。因為有時滑鼠滑動的過快會導致動畫效果與滑鼠的動作不一致，這時就需要stop（）來停止動畫。接下來在文章中將透過具體實例告訴大家如何使用stop方法

jQuery中如何終止動畫

#【推薦課程：##jQuery教學】

stop() 方法適用於所有jQuery 效果函數，包括滑動、淡入淡出和自訂動畫等

它有兩個參數為stopAll、 goToEnd

stopAll表示是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行

goToEnd 表示是否立即完成目前動畫。預設是 false。

因此，預設地，stop() 會清除在被選元素上指定的目前動畫

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style type="text/css"> 
#stop{
	margin-bottom:10px;
}
#panel,#flip

{   width:200px;
	padding:5px;
	text-align:center;
	background-color:pink;
	border:solid 1px #ccc;
}
#panel
{      
	
	display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击向下滑动</div>
<div id="panel">停止动画</div>
</body>
</html>

登入後複製

效果圖：

jQuery中如何終止動畫