首先,在做JQUERY 动画效果之前,必须先知道JQUERY动画效果的实现顺序。JQUERY中,会把所有的动画效果(如hide,show等)放入一个队列中(默认为'fx'),然后依照先进先出的原则执行队列中的动画效果。其他的非动画效果,都不会放入队列中。并且JQUERY 会优先执行这些非动画效果,然后再执行队列中的动画效果。那如果我们需要在执行一些动画操作之后,再执行非动画操作怎么办呢?这个时候就需要了解一些函数queue(),dequeue().
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
$(
'#object'
).hide(
'slow'
).appendTo($(
'#goal'
)).show(
'slow'
);这样是不行的,这样执行的顺序还是appendTo(),hide(),show().
应该写成
$(
'#object'
).hide(
'slow'
).queue(
function
(next){
$(
this
).appendTo($(
'#goal'
));
next();
}).show(
'slow'
);
这样先实现动画效果,再实现非动画效果的功能就实现了。
但是我们发现动画效果执行都是执行一个之后再执行另外一个,那假如我们想要几个动画同时执行怎么办呢?这就需要用到自定义队列。
我们知道,默认的队列是'fx',我们可以创建另外的队列,让后让这个队列和'fx'队列同时执行。
$(
"#object"
)
.delay(1000,
"fader"
)
.queue(
"fader"
,
function
(next) {
$(
this
).animate({opacity: 0},
{duration: 1000, queue:
false
});
next();
})
.dequeue(
"fader"
)
.animate({top:
"-=40"
}, {duration: 2000})
我们先来看它的思路:把控制不透明度和控向上移动的动画分别存储在两个队列中,控制向上移动的队列按默认情况进行(在2000毫秒内完成),而不透明度的控制在1000毫秒内执行,但这个队列要晚于默认队列1000毫秒执行
再简单一点,就是:前1000毫秒,只有控制高度的“fx”队列执行,而后1000毫秒,控制不透明度的“fader”队列和控制高度的“fx”并行
首先准备两个队列,
一个是默认的"fx",存储高度变化动画:
.animate({top:
"-=40"
}, {duration: 2000})
|
用来另一个是自定义的"fader"的队列,来存储不透明度变化的动画:
.animate({opacity: 0}, {duration: 1000, queue:
false
});
|
注意上面这段代码中的"queue:false",这是很关键的一句话,目的是让这个animate不进入默认的"fx"队列中
任何的动画效果都会进入"fx"队列中,即使你定义在.queue()中的动画也是一样,并且动画效果,务必会按顺序执行