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 EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jquery插件实现图片悬浮
Apr 16 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python实现微信自动回复功能
2018/04/11 Python
Python切片操作深入详解
2018/07/27 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
详解重置Django migration的常见方式
2019/02/15 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python爬虫用mongodb的理由
2020/07/28 Python
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
文明美德伴我成长演讲稿
2014/05/12 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
反邪教教育心得体会
2016/01/15 职场文书
学生安全责任协议书
2016/03/22 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
react中的DOM操作实现
2021/06/30 Javascript
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang