jQuery中dequeue()方法用法實(shí)例

更新時(shí)間：2014年12月29日 09:23:12 投稿：shichen2014

這篇文章主要介紹了jQuery中dequeue()方法用法,實(shí)例分析了dequeue()方法的功能、定義、使用技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery中dequeue()方法用法。分享給大家供大家參考。具體分析如下：

此函數(shù)能夠從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù)，并執(zhí)行它。
建議和queue()函數(shù)一起學(xué)習(xí)。

語(yǔ)法結(jié)構(gòu):

復(fù)制代碼代碼如下:

$(selector).dequeue(queueName)

參數(shù)列表:

參數(shù)	描述
queueName	可選。隊(duì)列的名稱(chēng)。默認(rèn)是 "fx"，動(dòng)畫(huà)隊(duì)列。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>dequeue()函數(shù)-腳本之家</title> 

<style type="text/css">

div 

{ 

  margin:3px; 

  width:50px; 

  position:absolute;

  height:50px; 

  left:10px; 

  top:30px; 

  background-color:yellow; 

}

div.red 

{ 

  background-color:red; 

} 

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function (){

    $("div").animate({left:'+=200px'}, 2000);

    $("div").animate({top:'0px'}, 600);

    $("div").queue(function(){

      $(this).toggleClass("red");

      $(this).dequeue();

    });

    $("div").animate({left:'10px', top:'30px'}, 700);

  });

})

</script>

</head>

<body>

  <button>開(kāi)始</button>

  <div></div>

</body>

</html>

注意:運(yùn)行編輯器之后，再按F5刷新網(wǎng)頁(yè)即可查看演示。

在以上代碼中，dequeue()函數(shù)可以在執(zhí)行完$(this).toggleClass("red")之后，將會(huì)從隊(duì)列最前端移除$("div").animate({left:'10px', top:'30px'}, 700)，也就是執(zhí)行此animate動(dòng)畫(huà)。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery事件與動(dòng)畫(huà)超詳細(xì)講解
在jquery中，jquery動(dòng)畫(huà)事件和動(dòng)畫(huà)函數(shù)經(jīng)常用的到，今天小編抽時(shí)間給大家整理了些關(guān)于常用的jquery動(dòng)畫(huà)事件和動(dòng)畫(huà)函數(shù)，對(duì)jquery動(dòng)畫(huà)函數(shù)和動(dòng)畫(huà)事件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2022-12-12
cnblogs TagCloud基于jquery的實(shí)現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...
2010-06-06
jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-07-07
jQuery中[attribute=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute=value]選擇器用法,實(shí)例分析了[attribute=value]選擇器的功能、定義及給定屬性及屬性值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
基于jQuery選擇器的整理集合
本篇文章介紹了，基于jQuery選擇器的整理集合。需要的朋友參考下
2013-04-04
使用jquery給input和textarea設(shè)定ie中的focus
在瀏覽網(wǎng)站的過(guò)程中，我們經(jīng)常可以看見(jiàn)當(dāng)鼠標(biāo)點(diǎn)擊后樣式改變的文本框和文本域,那么這種效果是如何實(shí)現(xiàn)的呢?
2008-05-05
jQuery 過(guò)濾方法filter()選擇具有特殊屬性的元素
需要選出所有有背景圖片的元素，使用jQuery的DOM過(guò)濾方法filter(),可以根據(jù)函數(shù)中表達(dá)的任何條件選擇元素,需要的朋友可以參考下
2014-06-06
jQuery實(shí)現(xiàn)放大鏡效果實(shí)例代碼
在一些電商網(wǎng)站我們都見(jiàn)到使用過(guò)放大鏡來(lái)查看商品詳情，那么基于jquery代碼是如何實(shí)現(xiàn)放大鏡效果的呢？下面由腳本之家小編給大家分享jquery代碼實(shí)現(xiàn)放大鏡效果
2016-03-03
jQuery下拉菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery下拉菜單的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
基于jquery的獲取mouse坐標(biāo)插件的實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的獲取mouse坐標(biāo)的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-04-04