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原生方法创建表格效率测试
Jul 08 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
浅析JavaScript动画
Jun 10 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python ftp上传文件
2016/02/13 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
如何进行Linux分区优化
2013/02/12 面试题
学校元旦晚会方案
2014/02/19 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers