jQuery提供了以下幾種方法來(lái)操作動(dòng)畫(huà)隊(duì)列寓调。
stop([clearQuery],[gotoEnd]):停止當(dāng)前jQuery對(duì)象里每個(gè)DOM元素上正在執(zhí)行的動(dòng)畫(huà)疆导。
queue([queueName,]callback):將callback動(dòng)畫(huà)數(shù)添加到當(dāng)前jQuery對(duì)象里所有DOM元素的動(dòng)畫(huà)函數(shù)隊(duì)列的尾部驶臊。
queue([queueName,]naeQueue):用newQueue動(dòng)畫(huà)函數(shù)隊(duì)列代替當(dāng)前jQuery對(duì)象里所的DOM元素的動(dòng)畫(huà)函數(shù)隊(duì)列豪治。
dequeue():執(zhí)行動(dòng)畫(huà)函數(shù)隊(duì)列頭的第一個(gè)動(dòng)畫(huà)函數(shù),并將該動(dòng)畫(huà)函數(shù)移出隊(duì)列烤礁。
clearQueue([queueName]):清空動(dòng)畫(huà)函數(shù)隊(duì)列中的所有動(dòng)畫(huà)函數(shù)讼积。
可選的 callback 參數(shù)是動(dòng)畫(huà)完成后所執(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>動(dòng)畫(huà)隊(duì)列的長(zhǎng)度是:<span></span></p>
<div></div>
<script type="text/javascript">
var div = $("div");
function runIt()
{
// 第1個(gè)動(dòng)畫(huà):顯示出來(lái)
div.show("slow");
// 第2個(gè)動(dòng)畫(huà):自動(dòng)動(dòng)畫(huà)脚仔,水平左移300px
div.animate({left:'+=300'},2000);
// 第3個(gè)動(dòng)畫(huà):卷起來(lái)
div.slideToggle(1000);
// 第4個(gè)動(dòng)畫(huà):放下來(lái)
div.slideToggle("fast");
// 第5個(gè)動(dòng)畫(huà):自動(dòng)動(dòng)畫(huà)勤众,水平右移300px
div.animate({left:'-=300'},1500);
// 第6個(gè)動(dòng)畫(huà):隱藏出來(lái)
div.hide("slow");
// 第7個(gè)動(dòng)畫(huà):顯示出來(lái)
div.show(1200);
// 第8個(gè)動(dòng)畫(huà):卷起來(lái),動(dòng)畫(huà)完成后回調(diào)runIt
div.slideUp("normal", runIt);
}
// 控制每0.1秒調(diào)用一次該方法鲤脏,該方法用于顯示動(dòng)畫(huà)隊(duì)列的長(zhǎng)度
function showIt()
{
var n = div.queue();
$("span").text(n.length);
setTimeout(showIt, 100);
}
runIt();
showIt();
</script>
ps: 隊(duì)列是一種列表们颜,不同的是隊(duì)列只能在末尾插入元素吕朵,在隊(duì)首刪除元素。隊(duì)列用于存儲(chǔ)按順序排列的數(shù)據(jù)窥突。先進(jìn)先出努溃。這點(diǎn)和棧不一樣,在棧中波岛,最后入棧的元素反被優(yōu)先處理茅坛。可以將隊(duì)列想象成銀行排隊(duì)辦理業(yè)務(wù)的人则拷,排隊(duì)在第一個(gè)的人先辦理業(yè)務(wù),其它人只能排著曹鸠,直到輪到他們?yōu)橹埂?/p>