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动态增减控件的一些想法和小插件
Aug 01 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
Vue渲染过程浅析
Mar 14 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
设定php简写功能的方法
2019/11/28 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python字典的常用方法总结
2019/07/31 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
销售自荐信
2013/10/22 职场文书
运动会获奖感言
2014/02/11 职场文书
个人培训自我鉴定
2014/03/28 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2016年十一促销广告语
2016/01/28 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电