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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
微信小程序图片左右摆动效果详解
Jul 13 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
如何用JavaScipt测网速
May 09 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
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
详解django三种文件下载方式
2018/04/06 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
Python实现图像的垂直投影示例
2020/01/17 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
毕业生的自我评价范文
2013/12/31 职场文书
教研活动总结
2014/04/28 职场文书
节能环保标语
2014/06/12 职场文书
假期安全教育广播稿
2014/10/04 职场文书
天堂的孩子观后感
2015/06/11 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL