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 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
jQuery链使用指南
Jan 20 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
js blob类型url的视频下载问题的解决
Nov 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php生成略缩图代码
2012/07/16 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
拖动一个HTML元素
2006/12/22 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
python 容器总结整理
2017/04/04 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python与js主要区别点总结
2020/09/13 Python
营销与策划专业毕业生求职信
2013/11/01 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
选秀节目策划方案
2014/06/06 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS