jquery 动画效果

   首先，在做JQUERY 动画效果之前，必须先知道JQUERY动画效果的实现顺序。JQUERY中，会把所有的动画效果（如hide，show等）放入一个队列中（默认为'fx'），然后依照先进先出的原则执行队列中的动画效果。其他的非动画效果，都不会放入队列中。并且JQUERY 会优先执行这些非动画效果，然后再执行队列中的动画效果。那如果我们需要在执行一些动画操作之后，再执行非动画操作怎么办呢？这个时候就需要了解一些函数queue(),dequeue().

  queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).

  dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.

  比如我们要先执行一个hide（），再执行一个appendto，最后再执行一个show（）的话，

$( '#object' ).hide( 'slow' ).appendTo($( '#goal' )).show( 'slow' );这样是不行的，这样执行的顺序还是appendTo(),hide(),show().
应该写成

$( '#object' ).hide( 'slow' ).queue( function (next){

     $( this ).appendTo($( '#goal' ));

     next();

}).show( 'slow' );

这样写之后，就会先把appendTo添加到队列fx中去，然后依次执行。（注意，使用于JQUERY1.4以上版本）
这样先实现动画效果，再实现非动画效果的功能就实现了。

   但是我们发现动画效果执行都是执行一个之后再执行另外一个，那假如我们想要几个动画同时执行怎么办呢?这就需要用到自定义队列。
我们知道，默认的队列是'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()中的动画也是一样，并且动画效果，务必会按顺序执行