animasi berhenti jQuery
jQuery Stop Animation
jQuery stop() kaedah digunakan untuk menghentikan animasi atau kesan selepas ia sebelum selesai.
Kaedah stop() berfungsi dengan semua fungsi kesan jQuery, termasuk slaid, pudar dan animasi tersuai.
Sintaks:
$(selector).stop(stopAll,goToEnd);
Parameter stopAll pilihan menentukan sama ada baris gilir animasi perlu dikosongkan. Lalai adalah palsu, yang hanya menghentikan animasi aktif, membenarkan mana-mana animasi beratur untuk melaksanakan ke belakang.
Parameter goToEnd pilihan menentukan sama ada untuk melengkapkan animasi semasa dengan segera. Lalai adalah palsu.
Oleh itu, secara lalai, stop() akan mengosongkan animasi semasa yang dinyatakan pada elemen yang dipilih.
Contoh berikut menunjukkan kaedah stop() tanpa parameter:
rreee
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Panel</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px
}
#panel {
width: 60px;
border: 1px solid #0050D0;
height: 22px;
overflow: hidden;
}
.head {
padding: 5px;
background: #96E555;
cursor: pointer;
width: 300px;
}
.content {
padding: 10px;
text-indent: 2em;
border-top: 1px solid #0050D0;
display: block;
width: 280px;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("#panel").animate({height:"150" }, 1000).animate({width:"300" },
1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},
1000);
});
//stop([clearQueue][,gotoEnd]);
//语法结构
$("button:eq(1)").click(function(){
$("#panel").stop();//停止当前动画，继续下一个动画
});
$("button:eq(2)").click(function(){
$("#panel").stop(true);//清除元素的所有动画
});
$("button:eq(3)").click(function(){
$("#panel").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
});
$("button:eq(4)").click(function(){
$("#panel").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
});
})
</script>
</head>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
