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 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
jquery实用代码片段集合
Aug 12 Javascript
JavaScript基本编码模式小结
May 23 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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面向对象
2012/02/22 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP链表操作简单示例
2016/10/15 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python松散正则表达式用法分析
2016/04/29 Python
python正则表达式re之compile函数解析
2017/10/25 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
跟单文员岗位职责
2014/01/03 职场文书
五一家具促销方案
2014/01/10 职场文书
颁奖晚会主持词
2014/03/25 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server