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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP 转义使用详解
2013/07/15 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
搭建vue开发环境
2018/07/19 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
wxpython实现图书管理系统
2018/03/12 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python几种常见算法汇总
2020/06/02 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
小学生演讲稿
2014/01/12 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
暑期教师培训方案
2014/06/07 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers