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实现全选、全不选以及单选功能
Mar 23 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
使用jQuery实现掷骰子游戏
Oct 24 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+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php中的依赖注入实例详解
2019/08/14 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python中的二维列表实例详解
2018/06/19 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
一套软件测试笔试题
2014/07/25 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
商场促销活动方案
2014/02/08 职场文书
红旗方阵解说词
2014/02/12 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android