首頁 > web前端 > js教程 > jQuery中如何終止動畫

jQuery中如何終止動畫

清浅
發布: 2019-01-25 11:06:49
原創
3986 人瀏覽過

可以直接使用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中如何終止動畫

總結:以上就是這篇文章的全部內容了,希望透過這篇文章可以幫助大家學會終止動畫的方法。

以上是jQuery中如何終止動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板