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闭包的高级使用方法实例
Jul 04 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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 whois查询API制作方法
2011/06/23 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
php实现微信发红包功能
2018/07/13 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
pandas计数 value_counts()的使用
2019/06/24 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python list和str互转的实现示例
2020/11/16 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
幼儿园消防安全制度
2014/01/26 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
清洁工个人总结
2015/03/04 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android