jQuery中queue()方法用法實(shí)例
本文實(shí)例講述了jQuery中queue()方法用法。分享給大家供大家參考。具體分析如下：
此方法能夠顯示或者操作在匹配元素上執(zhí)行的函數(shù)隊(duì)列。
此方法可能用的并不是太頻繁，但是卻非常的重要，下面就結(jié)合實(shí)例來介紹一下次方法的用法。
根據(jù)方法參數(shù)的不同，作用也有所不同。
說明:建議結(jié)合dequeue()函數(shù)一起學(xué)習(xí)。
語法結(jié)構(gòu)一:
參數(shù)列表:
沒有參數(shù)的時(shí)候，能夠返回第一個(gè)匹配元素上的動(dòng)畫隊(duì)列。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>queue()函數(shù)-腳本之家</title>
<style type="text/css">
.box{
width:300px;
height:150px;
}
.mytest{
width:50px;
height:50px;
background-color:green;
position:absolute;
left:0px;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:"+=200"},3000);
$(".mytest").animate({top:"+=50"},2000);
$(".mytest").text("動(dòng)畫完成");
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div class="box">
<div class="mytest"></div>
</div>
<button id="do">點(diǎn)擊開始動(dòng)畫</button>
<button id="count">計(jì)算隊(duì)列中函數(shù)數(shù)量</button>
</body>
</html>
由于queue()函數(shù)沒有參數(shù)，所以返回值是第一個(gè)匹配元素上的動(dòng)畫隊(duì)列，也就是div元素的動(dòng)畫隊(duì)列，當(dāng)點(diǎn)擊第二個(gè)按鈕的時(shí)候能夠?qū)崟r(shí)的計(jì)算出當(dāng)前隊(duì)列中的動(dòng)畫個(gè)數(shù)。
語法二:
可以為匹配元素的函數(shù)隊(duì)列最后面添加一個(gè)函數(shù)。
參數(shù)列表:
在語法一的實(shí)例中，大家可能注意到一個(gè)問題，那就是我們希望在所有的動(dòng)畫都完成之后，再在div中添加“動(dòng)畫完成”四個(gè)字，但是從運(yùn)行的實(shí)際表現(xiàn)來看，并非如此，這主要的原因是，show()和animate()動(dòng)畫函數(shù)會(huì)默認(rèn)的添加到fx動(dòng)畫隊(duì)列中，而text()方法并非動(dòng)畫函數(shù)，所以不會(huì)加入到fx隊(duì)列，并且會(huì)首先執(zhí)行。那么可以通過使用此函數(shù)，將text()方法入隊(duì)。
實(shí)例代碼:
實(shí)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>queue()函數(shù)-腳本之家</title>
<style type="text/css">
.box{
width:300px;
height:150px;
}
.mytest{
width:50px;
height:50px;
background-color:green;
position:absolute;
left:0px;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:"+=200"},3000);
$(".mytest").animate({top:"+=50"},2000);
$(".mytest").queue(function(){$(this).text("動(dòng)畫完成")});
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div class="box">
<div class="mytest"></div>
</div>
<button id="do">點(diǎn)擊開始動(dòng)畫</button>
<button id="count">計(jì)算隊(duì)列中函數(shù)數(shù)量</button>
</body>
</html>
以上代碼實(shí)現(xiàn)了我們最終需要效果。
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>queue()函數(shù)-腳本之家</title>
<style type="text/css">
.box{
width:300px;
height:150px;
}
.mytest{
width:50px;
height:50px;
background-color:green;
position:absolute;
left:0px;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:"+=200"},3000);
$(".mytest").animate({top:"+=50"},2000);
$(".mytest").queue(function(){
$(this).text("動(dòng)畫還將持續(xù)");
});
$(".mytest").animate({left:"-=200"},3000);
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div class="box">
<div class="mytest"></div>
</div>
<button id="do">點(diǎn)擊開始動(dòng)畫</button>
<button id="count">計(jì)算隊(duì)列中函數(shù)數(shù)量</button>
</body>
</html>
以上代碼中，我們想在執(zhí)行完text()方法之后再執(zhí)行一個(gè)自定義動(dòng)畫，但是表現(xiàn)卻并非如此，最后面的自定義動(dòng)畫并沒有執(zhí)行。
代碼修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>queue()函數(shù)-腳本之家</title>
<style type="text/css">
.box{
width:300px;
height:150px;
}
.mytest{
width:50px;
height:50px;
background-color:green;
position:absolute;
left:0px;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:"+=200"},3000);
$(".mytest").animate({top:"+=50"},2000);
$(".mytest").queue(function(){
$(this).text("動(dòng)畫還將持續(xù)");
$(this).dequeue();
});
$(".mytest").animate({left:"-=200"},3000);
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div class="box">
<div class="mytest"></div>
</div>
<button id="do">點(diǎn)擊開始動(dòng)畫</button>
<button id="count">計(jì)算隊(duì)列中函數(shù)數(shù)量</button>
</body>
</html>
以上代碼實(shí)現(xiàn)了我們的要求，在代碼中添加:
也就是說通過queue()添加函數(shù)時(shí)，我們應(yīng)當(dāng)確保最終調(diào)用了 .dequeue()，這樣下一個(gè)排隊(duì)的函數(shù)才能夠得到執(zhí)行。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery隊(duì)列控制方法詳解queue()/dequeue()/clearQueue()
- jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
- jQuery中隊(duì)列queue()函數(shù)的實(shí)例教程
- jQuery 事件隊(duì)列調(diào)整方法
- jquery隊(duì)列函數(shù)用法實(shí)例
- 用隊(duì)列模擬jquery的動(dòng)畫算法實(shí)例
- 利用Jquery隊(duì)列實(shí)現(xiàn)根據(jù)輸入數(shù)量顯示的動(dòng)畫
- jQuery使用動(dòng)畫隊(duì)列自定義動(dòng)畫操作示例
- JQuery中queue方法用法示例
相關(guān)文章
基于jquery的一個(gè)OutlookBar類，動(dòng)態(tài)創(chuàng)建導(dǎo)航條
初學(xué)jquery，如有錯(cuò)誤，請(qǐng)高手們指出想看效果及完整代碼的可以下載rar包2010-11-11
jQuery EasyUI API 中文文檔 - NumberBox數(shù)字框
jQuery EasyUI API 中文文檔 - NumberBox數(shù)字框使用介紹，需要的朋友可以參考下。2011-10-10
基于jQuery架構(gòu)javascript基礎(chǔ)體系
jQuery畢竟還只是一個(gè)基礎(chǔ)的最底層的工具集，封裝元素選擇器，事件等等，基本上能滿足一般的需求，但要從整體的WEB的周度來看，為了提高javascript開發(fā)的效率與可重用性，就需要有一個(gè)整體的布局2011-01-01
jQuery移動(dòng)頁面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫方法,jQuery是當(dāng)今人氣最高的Javascript庫并被廣泛應(yīng)用于移動(dòng)web的開發(fā),需要的朋友可以參考下2015-12-12
下面就日常最常用的，在Form表單中如何獲取被中選的Radio值做一小小的示例，感興趣的朋友可以參考下2013-08-08
jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例,需要的朋友可以參考下2014-04-04
Javascript jquery css 寫的簡(jiǎn)單進(jìn)度條控件
很多的時(shí)候用戶需要等待你“臃腫”的 Javascript 代碼處理完成（Web 2.0 的特色）。期間或許加入一個(gè)類似于進(jìn)度條的東西讓用戶有點(diǎn)“安慰”。這個(gè)東西實(shí)現(xiàn)起來并不復(fù)雜，無非就是獲得總的處理?xiàng)l目，然后獲得一個(gè)百分比，再顯示輸出。2008-03-03
jquery動(dòng)態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
這段代碼是通過jquery動(dòng)態(tài)增加限定數(shù)額的text，以及清除文本內(nèi)容，用到了after()方法追加元素，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄詳細(xì)代碼
之前做項(xiàng)目的時(shí)候，一直都想著做一個(gè)上下滾動(dòng)的公告欄，作為展示網(wǎng)站的最新公告信息，給用戶帶來極好的用戶體驗(yàn)，下面小編通過實(shí)例代碼給大家分享基于jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄，感興趣的朋友一起看看吧2018-11-11
這篇文章為大家分享了超漂亮的jQuery圖片輪播特效，支持Ajax加載數(shù)據(jù)，響應(yīng)式布局，支持移動(dòng)端觸屏，功能強(qiáng)大，感興趣的小伙伴們可以參考一下2015-11-11