<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

<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)態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個(gè)瀏覽器寬度的div，當(dāng)然我們可以使用相對(duì)布局的方式做到這一點(diǎn)，下面是具體實(shí)現(xiàn)，大家可以參考下
2014-06-06
jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能,結(jié)合實(shí)例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實(shí)現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
20款超贊的jQuery插件 Web開(kāi)發(fā)人員必備
jQuery的易擴(kuò)展性吸引了來(lái)自全球的開(kāi)發(fā)者來(lái)共同編寫(xiě)jQuery插件。jQuery插件不僅能夠增強(qiáng)網(wǎng)站的可用性，有效地改善用戶(hù)體驗(yàn)，還可以大大減少開(kāi)發(fā)時(shí)間。現(xiàn)在的jQuery插件很多，可以根據(jù)您的項(xiàng)目需要來(lái)選擇。這里為您介紹20款非常不錯(cuò)的插件。
2011-02-02
jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
本篇文章主要介紹了jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
如何使用jquery easyui創(chuàng)建標(biāo)簽組件
這篇文章主要介紹了如何使用jquery easyui創(chuàng)建標(biāo)簽組件的相關(guān)資料,需要的朋友可以參考下
2015-11-11
jQuery插件EasyUI獲取當(dāng)前Tab中iframe窗體對(duì)象的方法
這篇文章主要介紹了jQuery插件EasyUI獲取當(dāng)前Tab中iframe窗體對(duì)象的方法,涉及EasyUI窗體操作的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
基于jQuery的讓textarea支持Ctrl+Z步步撤銷(xiāo)功能
基于jQuery的讓textarea支持Ctrl+Z步步撤銷(xiāo)功能，需要的朋友可以參考下。
2011-10-10
影響jQuery使用的14個(gè)方面
jQuery的插件提供了一個(gè)很好的方法，節(jié)省了時(shí)間和簡(jiǎn)化了開(kāi)發(fā)，避免程序員從頭開(kāi)始編寫(xiě)每個(gè)組件。但是，插件也將一個(gè)不穩(wěn)定因素引入代碼中。一個(gè)好的插件節(jié)省了無(wú)數(shù)的開(kāi)發(fā)時(shí)間，一個(gè)質(zhì)量不好的插件會(huì)導(dǎo)致修復(fù)錯(cuò)誤的時(shí)間比實(shí)際從頭開(kāi)始編寫(xiě)組件的時(shí)間還長(zhǎng)。
2014-09-09
打造個(gè)性化的功能強(qiáng)大的Jquery虛擬鍵盤(pán)(VirtualKeyboard)
本文主要講訴了如何一起一步一步打造個(gè)性化的VirtualKeyboard：功能強(qiáng)大的Jquery虛擬鍵盤(pán)，非常的詳細(xì)，非常實(shí)用，有需要的朋友可以參考下
2014-10-10
jquery過(guò)濾特殊字符'',防sql注入的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery過(guò)濾特殊字符',防sql注入的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08