jQuery中dequeue()方法用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了jQuery中dequeue()方法用法。分享给大家供大家参考。具体分析如下:

此函数能够从队列最前端移除一个队列函数,并执行它。
建议和queue()函数一起学习。

语法结构:

$(selector).dequeue(queueName)

参数列表:

参数 描述
queueName 可选。队列的名称。 默认是 "fx",动画队列。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>dequeue()函数-三水点靠木</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刷新网页即可查看演示。

在以上代码中,dequeue()函数可以在执行完$(this).toggleClass("red")之后,将会从队列最前端移除$("div").animate({left:'10px', top:'30px'}, 700),也就是执行此animate动画。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
jQuery中queue()方法用法实例
Dec 29 #Javascript
浅谈JavaScript function函数种类
Dec 29 #Javascript
JavaScript异步加载浅析
Dec 28 #Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 #Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 #Javascript
JavaScript设计模式之单件模式介绍
Dec 28 #Javascript
理解javascript回调函数
Dec 28 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
初学Python函数的笔记整理
2015/04/07 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Pytorch之contiguous的用法
2019/12/31 Python
jupyter notebook实现显示行号
2020/04/13 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
师德个人剖析材料
2014/02/02 职场文书
服务承诺口号
2014/05/22 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技