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 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
VUE实现强制渲染,强制更新
Oct 29 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Django之腾讯云短信的实现
2020/06/12 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
理财投资建议书
2014/03/12 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
2014年冬季防火方案
2014/05/21 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2014年技术部工作总结
2014/12/12 职场文书
初中中等生评语
2014/12/29 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
如何使用python包中的sched事件调度器
2022/04/30 Python