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代码放在head和body中的区别分析
Dec 01 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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中Array相关函数简介
2016/07/03 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python深入学习之闭包
2014/08/31 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python实现全排列的打印
2018/08/18 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python协程之动态添加任务的方法
2019/02/19 Python
python os模块在系统管理中的应用
2020/06/22 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
公司年会演讲稿范文
2014/01/11 职场文书
中文教师求职信
2014/02/22 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2015年端午节活动总结
2015/02/11 职场文书
匿名检举信范文
2015/03/02 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
婚育证明样本
2015/06/16 职场文书