浅谈jquey 中queue队列


首先来一张w3c对queue用法介绍

 

恩,好像是这个样子,在queue出场之前先谈谈jquery链式操作,举个栗子:

$('#div1').animate({
top:'50px',
left:'100px'
},'slow').css({
width:'300px',
height:'300px'
}).fadeOut();

 这段代码很简单,那么它的效果是怎样的呢?首先div1同时向上移动50px,向左移动100px--->宽度和高度变为300px----->最后消失...

    真的是这样吗?动手运行一下,细心的童鞋就会发现 它先宽度和高度变为300px,然后才是向上向左移动,最后消失。原因在于jquery链式操作队列,只有动画才被依次加入到这个队列中去,像toggle,show,hide,fadeIn,fadeOut...这些动画效果才会被按顺序依次执行。问题来了,非动画函数也想加入这个队列依次执行该怎么办?

   queue闪亮登场酷,duang

$('#div1').animate({
top:'50px',
left:'100px'
},'slow')
.queue(function(){
$(this).css({
width:'300px',
height:'300px'
});
//保证余下队列继续执行
$(this).dequeue();
}).fadeOut();

 这样就会按照我们的想法运动了。。

顺便提一下dequeue,当调用 .dequeue() 时,会从序列中删除下一个函数,然后执行它。该函数反过来会(直接或间接地)引发对 .dequeue() 的调用,这样序列才能继续下去。

不是总结的总结:

1,用queue把函数加入队列(通常是函数数组)
2,用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)

 

 


本站声明
本文转载自:http://jcao54.iteye.com/blog/2254361     作者:火焰莲     发布日期:2015-11-04     本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。


 
© 2014-2016 ITdaan.com 粤ICP备14056181号