JQuery中queue方法用法示例


Posted in jQuery onJanuary 31, 2019

本文实例讲述了JQuery中queue方法用法。分享给大家供大家参考,具体如下:

jquery的queue方法

显示或操作在匹配元素上执行的函数队列

意思就是对匹配上的元素,显示作用在这个元素上的函数的个数,也就是上述所说的“显示”,而操作则是更改这些作用在该元素上的函数队列

举个例子:

<style>
 div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
 div.newcolor { background:blue; }
 span { color:red; }
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
$("#show").click(function () {
   var n = $("div").queue("fx");
   $("span").text("Queue length is: " + n.length);
});
function runIt() {//里面有一系列作用于div元素的函数,一共为8个(在没有执行$("div").slideUp("normal", runIt);这个语句的时候显示的结果是8个,每次执行完一个都会减少一个,但是当所有动作执行完又再次执行RUNIT()的时候,结果就不是八而是十六了,很明显它把原本执行完的序列,原本应该为0的时候它却是8+8而不是0+8的结果显示),
//但如果你复制以上代码发现点击按钮是小于8,是因为你点击的时候动作已经开始执行,序列-1
   $("div").show("slow");
   $("div").animate({left:'+=200'},2000);
   $("div").slideToggle(1000);
   $("div").slideToggle("fast");
   $("div").animate({left:'-=200'},1500);
   $("div").hide("slow");
   $("div").show(1200);
   $("div").slideUp("normal", runIt);
}
runIt();

讨论的重点不是它重复执行RUNIT()的时候的序列长度,这个不管一般也用不上

而是如何用queue来操作函数序列

<style>
 div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
 div.newcolor { background:blue; }
</style>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
$("#start").click(function () {
   $("div").show("slow");
   $("div").animate({left:'+=200'},5000);
   $("div").queue(function () {//创建一个匿名函数作为一个<动画>序列,忘记说明$("div").queue("fx"),默认参数是 fx, 标准的效果序列。当然你也可以将addclass这个操作自定义成一个动画效果也是可以的,现在这种写法,addclass也变成了一个效果函数,并成了序列的内容
     $(this).addClass("newcolor");
     $(this).dequeue();//插入自定义函数之后,如果还需要继续还行队列,则用dequeue(),如果不用这个函数,动画将停止,当然动画序列还是在的,这并不是意味着删除剩下的序列,这代码只能放自定义函数最后面,如果放在外面会有意料之外的效果,比如它不是按照播放完一个动画再执行自定义函数里面的内容,而是在上一个动画开始后立马就执行了,而放在自定义函数内部则不会出现这个问题。
   });
   $("div").animate({left:'-=200'},1500);
   $("div").queue(function () {
     $(this).removeClass("newcolor");
     $(this).dequeue();
   });
   $("div").slideUp();
 });
 $("#stop").click(function () {
   $("div").queue("fx", []);//stop是结束当前正在进行的动画,如果除了当前动画还有后续动画,则会立马执行下一个动画,而这一句是将序列用新的数组(这里是空数组)代替原本的序列,意味着,删除了剩下的所有动画序列,所以这里就能体现出queue的作用,它主要还是用来替换和删除动画效果,新增的话可以用其他代替
   $("div").stop();
 });

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
You might like
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
车辆安全检查制度
2014/01/12 职场文书
工程项目建议书范文
2014/03/12 职场文书
公休请假条
2014/04/11 职场文书
法制教育演讲稿
2014/09/10 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
八年级上册语文教学计划
2015/01/22 职场文书