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 相关文章推荐
将查询条件的input、select清空
Jan 14 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
DWR中各种java方法的调用
May 04 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
PHP SOCKET编程详解
2015/05/22 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
js更优雅的兼容
2010/08/12 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Python的一些用法分享
2012/10/07 Python
浅谈python中的占位符
2017/11/09 Python
为什么说python适合写爬虫
2020/06/11 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
《假如》教学反思
2014/04/17 职场文书
工厂搬迁方案
2014/05/11 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript