動畫隊(duì)列
- 動畫隊(duì)列可以說是動畫執(zhí)行的一個(gè)順序機(jī)制朽寞，當(dāng)我們對一個(gè)對象添加多次動畫效果時(shí)后，添加的動作就會被放入這個(gè)動畫隊(duì)列中，按照先進(jìn)先出的順序執(zhí)行.
動畫隊(duì)列機(jī)制和執(zhí)行順序
- 對于一組元素上的動畫效果昙衅，有如下兩種情況：
- 當(dāng)在一個(gè)animate()方法中應(yīng)用多個(gè)屬性時(shí)，動畫是同時(shí)發(fā)生的定鸟。
- 當(dāng)以鏈?zhǔn)降膶懛☉?yīng)用動畫方法時(shí)而涉，動畫是按照順序發(fā)生的。
- 對于多組元素上的動畫效果联予，有如下情況：
- 默認(rèn)情況下啼县，動畫都是同時(shí)發(fā)生的。
- 當(dāng)以回調(diào)的形式應(yīng)用動畫方式時(shí)沸久，動畫是按照回調(diào)順序發(fā)生的季眷。
自定義動畫
jQuery提供了以下幾種方法來操作動畫隊(duì)列。
stop([clearQuery],[gotoEnd]):停止當(dāng)前jQuery對象里每個(gè)DOM元素上正在執(zhí)行的動畫卷胯。
queue([queueName,]callback):將callback動畫數(shù)添加到當(dāng)前jQuery對象里所有DOM元素的動畫函數(shù)隊(duì)列的尾部子刮。
queue([queueName,]naeQueue):用newQueue動畫函數(shù)隊(duì)列代替當(dāng)前jQuery對象里所的DOM元素的動畫函數(shù)隊(duì)列。
dequeue():執(zhí)行動畫函數(shù)隊(duì)列頭的第一個(gè)動畫函數(shù)，并將該動畫函數(shù)移出隊(duì)列挺峡。
clearQueue([queueName]):清空動畫函數(shù)隊(duì)列中的所有動畫函數(shù)葵孤。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
<style>
div {
width: 60px;
height: 60px;
position:absolute;
top:60px;
background: #f0f;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<p>動畫隊(duì)列的長度是：<span></span></p>
<div></div>
<script type="text/javascript">
var div = $("div");
function runIt()
{
// 第1個(gè)動畫：顯示出來
div.show("slow");
// 第2個(gè)動畫：自動動畫橱赠，水平左移300px
div.animate({left:'+=300'},2000);
// 第3個(gè)動畫：卷起來
div.slideToggle(1000);
// 第4個(gè)動畫：放下來
div.slideToggle("fast");
// 第5個(gè)動畫：自動動畫尤仍，水平右移300px
div.animate({left:'-=300'},1500);
// 第6個(gè)動畫：隱藏出來
div.hide("slow");
// 第7個(gè)動畫：顯示出來
div.show(1200);
// 第8個(gè)動畫：卷起來，動畫完成后回調(diào)runIt
div.slideUp("normal", runIt);
}
// 控制每0.1秒調(diào)用一次該方法狭姨，該方法用于顯示動畫隊(duì)列的長度
function showIt()
{
var n = div.queue();
$("span").text(n.length);
setTimeout(showIt, 100);
}
runIt();
showIt();
</script>
