queue:
queue主要用于给元素上的函数队列(默认名为fx)添加函数(动画效果),
这样dequeue就可以取出并执行函数队列中的第一个函数(即最先进入函数队列的函数),
delay则可以延迟元素上函数队列的执行。
jquery的动画效果,如animation()、show()、slideUp()、fadeIn()等在我看来它的效果就是用queue给fx队列添加一个函数,然后用dequeue调用了它。
queue相关用法:
.queue(queueName):元素上的函数队列
.queue(queueName,newQueue):用newQueue替换掉queueName,所以.queue(queueName,[])即为停止动画。
.queue(queueName,callback):queueName执行完后的回调函数,它会忽略后续queueName的动画函数
.clearQueue(queueName):清空(剩余)函数队列,正在执行的那个函数会继续
.dequeue(queueName):取出并执行函数队列中的第一个函数
.delay(time,queueName):过time(单位为毫妙)后才执行queueName中的函数
注:以上忽略queueName是即为默认的‘fx'
.stop()或.stop(false):跳过正在执行的那个函数,立马运行下一个动画函数
.stop(true):立即停止动画
.stop(false,true):立即跳到当前函数的结束状态,开始执行下一个函数。
但是stop()只能清空动画队列,不能清空所有通过 .queue() 创建的队列(clearQueue可以)。
animation中也用到了queue:
.animation(params,options):
params::一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如常用的有:
duration/speed - 设置动画持续的时间;
easing - 规定要使用的 easing 函数,jquery只提供了swing(默认值)和linear,要用别的需要下载插件,
可在http://james.padolsey.com/demos/jquery/easing/查看各种效果;
callback - 规定动画完成之后要执行的函数;
queue - 布尔值。指示是否在效果队列中放置动画,默认值为true。如果为 false,则动画将立即开始(如果当前有正在执行的动画函数,则它会与之同时执行)
来看看实例练习:
参考jQuery动画高级用法(上)——详解animation中的.queue()函数
我们知道如果这样:
实例练习0:
$('#id1').fadeOut('slow').fadeIn('slow');
结果是:id1会先消失,然后再出现。
若要达到先消失,然后再另一个div里出现的效果,如果这样写:
实例练习1:
$('#id1').fadeOut('slow').appendTo($('#rightC')).fadeIn('slow');