jQuery中queue()方法用法實例
更新時間：2014年12月29日 09:16:56 投稿：shichen2014
這篇文章主要介紹了jQuery中queue()方法用法,實例分析了queue()方法的功能、定義及使用技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jQuery中queue()方法用法。分享給大家供大家參考。具體分析如下：
此方法能夠顯示或者操作在匹配元素上執(zhí)行的函數(shù)隊列。
此方法可能用的并不是太頻繁，但是卻非常的重要，下面就結(jié)合實例來介紹一下次方法的用法。
根據(jù)方法參數(shù)的不同，作用也有所不同。
說明:建議結(jié)合dequeue()函數(shù)一起學習。
語法結(jié)構(gòu)一:
復(fù)制代碼 代碼如下:
$("selector").queue(queueName)
參數(shù)列表:
沒有參數(shù)的時候，能夠返回第一個匹配元素上的動畫隊列。
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<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("動畫完成");
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div class="box">
<div class="mytest"></div>
</div>
<button id="do">點擊開始動畫</button>
<button id="count">計算隊列中函數(shù)數(shù)量</button>
</body>
</html>
由于queue()函數(shù)沒有參數(shù)，所以返回值是第一個匹配元素上的動畫隊列，也就是div元素的動畫隊列，當點擊第二個按鈕的時候能夠?qū)崟r的計算出當前隊列中的動畫個數(shù)。
語法二:
復(fù)制代碼 代碼如下:
$("selector").queue(callback())
可以為匹配元素的函數(shù)隊列最后面添加一個函數(shù)。
參數(shù)列表:
在語法一的實例中，大家可能注意到一個問題，那就是我們希望在所有的動畫都完成之后，再在div中添加“動畫完成”四個字，但是從運行的實際表現(xiàn)來看，并非如此，這主要的原因是，show()和animate()動畫函數(shù)會默認的添加到fx動畫隊列中，而text()方法并非動畫函數(shù)，所以不會加入到fx隊列，并且會首先執(zhí)行。那么可以通過使用此函數(shù)，將text()方法入隊。
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<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("動畫完成")});
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div class="box">
<div class="mytest"></div>
</div>
<button id="do">點擊開始動畫</button>
<button id="count">計算隊列中函數(shù)數(shù)量</button>
</body>
</html>
以上代碼實現(xiàn)了我們最終需要效果。
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<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("動畫還將持續(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">點擊開始動畫</button>
<button id="count">計算隊列中函數(shù)數(shù)量</button>
</body>
</html>
以上代碼中，我們想在執(zhí)行完text()方法之后再執(zhí)行一個自定義動畫，但是表現(xiàn)卻并非如此，最后面的自定義動畫并沒有執(zhí)行。
代碼修改如下:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<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("動畫還將持續(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">點擊開始動畫</button>
<button id="count">計算隊列中函數(shù)數(shù)量</button>
</body>
</html>
以上代碼實現(xiàn)了我們的要求，在代碼中添加:
復(fù)制代碼 代碼如下:
$(this).dequeue();
也就是說通過queue()添加函數(shù)時，我們應(yīng)當確保最終調(diào)用了 .dequeue()，這樣下一個排隊的函數(shù)才能夠得到執(zhí)行。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery 是最流行也是使用最廣泛的 JavaScript 框架，它簡化了 HTML 文檔操作，事件處理，動畫效果和 Ajax 交互。下面向大家分享8個優(yōu)秀的 jQuery 倒計時插件和教程2011-12-12
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項,需要的朋友可以參考下2020-05-05
jQuery學習筆記之 Ajax操作篇（一） - 數(shù)據(jù)加載
Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當然這些數(shù)據(jù)的格式是多種多樣的。2014-06-06
這篇文章主要介紹了jQuery的元素篩選，并舉例進行說明，希望對大家有所幫助2016-11-11
這篇文章主要介紹了jQuery如何隱藏和顯示 input 默認值,需要的朋友可以參考下2014-06-06
jQuery插件formValidator實現(xiàn)表單驗證
這篇文章主要為大家詳細介紹了jQuery插件formValidator實現(xiàn)表單驗證的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery控制控件文本的長度的操作方法,非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
jquery animate實現(xiàn)鼠標放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實現(xiàn)鼠標放上去顯示,離開就隱藏的效果，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。它的文檔說明很全，而且各種應(yīng)用也說得很詳細，同時還有許多成熟的插件可供選擇。2015-05-05
在項目開發(fā)過程中，經(jīng)常會遇到帶有彈窗的頁面，尤其是在移動端。下面通過本文給大家分享jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果，需要的朋友參考下吧2017-12-12