jQuery中dequeue()方法用法實例

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

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

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

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

語法結構:

$(selector).dequeue(queueName)

參數(shù)列表:

參數(shù)	描述
queueName	可選。隊列的名稱。默認是 "fx"，動畫隊列。

實例代碼:

復制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<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>開始</button>

  <div></div>

</body>

</html>

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

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

希望本文所述對大家的jQuery程序設計有所幫助。

您可能感興趣的文章:

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