本文实例讲述了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常用插件及用法总结》、《jquery操作json数据技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
egg项目npm/cnpm出错Connect timeout
网友评论