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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现计算器功能
Oct 19 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
Vuex简单入门
2017/04/19 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
angular动态表单制作
2018/02/23 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python封装原理与实现方法详解
2018/08/28 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python处理写入数据代码讲解
2020/10/22 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
化学教师教学反思
2014/01/17 职场文书
简历里的自我评价
2014/01/31 职场文书
论文评语大全
2014/04/29 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年终个人工作总结
2014/11/07 职场文书
道歉情书大全
2015/05/12 职场文书