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 相关文章推荐
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
使用JS读秒使用示例
Sep 21 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python虚拟环境迁移方法
2019/01/03 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
数字化校园建设方案
2014/05/03 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
离婚协议书范本2014
2014/10/27 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技