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 UI 1.72 之datepicker
Dec 29 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
vue小白入门教程
Apr 02 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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中ADODB类详解
2008/03/25 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
JS查看对象功能代码
2008/04/25 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Pytorch之Variable的用法
2019/12/31 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
异常和异常类的概念
2014/09/12 面试题
应聘教师推荐信
2013/10/31 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
高中军训第一天感言
2014/03/06 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
创卫工作总结2015
2015/04/22 职场文书
运动会观后感
2015/06/09 职场文书
小爸爸观后感
2015/06/15 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis