show()、hide()、fadeIn()、fadeOut()、slideDown、slideUp、slideToggle()都接受可选的时长和回调参数（选项对象参数）。

toggle(duration,callback)

toggle(condition)传入true和不带参数调用show()是一样的，传入false则和不带参数调用hide()是一样的。

fadeTo()会将元素的当前opacity值变化的目标值，第一参数必须是时长，第二参数是opacity目标值，第三参数是回调函数。

 

时长：字符串"fast"表示200ms,字符串"normal"表示400ms,字符串"slow"表示600ms。默认为400ms。

jQuery.fx.speeds["medium-fast"]=300;

jQuery.fx.speeds["medium-slow"]=500;　　//改变默认定义的时长

 

animate(properties,duration,easing,callback);

animate(properites,options);

在animate()中可以使用"toggle"来实现显示或隐藏。

options参数：duration属性，complete属性（在动画完成时的回调函数），step属性（指定在每一步或每一帧调用的回调函数），queue属性（指定动画是否需要队列化），easing属性。

queue属性：设置为false可以取消默认的队列化，非队列化的动画会立即执行。随后队列化的动画不会等待非队列化的动画执行完成后才执行。

 $('img').fadeIn(500).animate({'width':'+=100'},{queue:false,duration:1000}).fadeOut(500);

 //改变width属性是非队列化的，这段width动画和fadeIn()效果的开始时间相同。fadeOut()效果会在fadeIn()效果完成时立刻开始，它不会等到width动画完成。

easing属性：指定缓动函数名，jQuery默认使用的是命名为"swing"的正弦函数。

 

stop([clearQueue][,gotoEnd])方法：

1.如果直接使用不带参数的stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画，可以用在不想让元素被用户连续触发，动画不断传入队列的情况。

$(function(){      $("#panel").hover(function() {          $(this).stop().animate({height : "150",width : "300"} , 200 );      },function() {          $(this).stop().animate({height : "22",width : "60" } , 300 );      });});

 

2.stop(true)：若不使用参数在下面这种情况下就会出问题。

$(function(){     $("#panel").hover(function() {                $(this).stop()                    .animate({height : "150" } , 200 )    //如果此时触发了光标移出的事件，将不执行2处的动画，而会执行3处的动画。                    .animate({width : "300" } , 300 )　　//3    },function() {                $(this).stop()                    .animate({height : "22" } , 200 )　　//2                    .animate({width : "60" } , 300 )　　    });});

//解决方法：传入true在stop()，此时程序会把当前元素接下来尚未执行完的动画队列都清空。

3.stop(false,true)：可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。

4.stop(true,true)：停止当前动画直接到达当前动画的末状态，并清空动画队列。

注：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

 

delay(duration[,name])：延迟命名队列中下一个函数的执行，在下一个函数执行之前会停顿一段时间。（省略name则默认为特效队列名称fx）

 

queue()、dequeue()、clearQueue()队列相关方法

queue(name)：根据传入的名称查找建立在匹配集中的第一个元素上的任意队列，并以函数数组形式返回。

queue(name,function)：将传入的函数添加到匹配集中的所有元素的命名队列（name参数）的末尾。如果在某个元素上不存在这种命名队列，则创建一个队列。

queue(name,queue)：把匹配元素上现有的任意队列替换为传入的队列。（参数name表示需要替换的队列名称。参数queue表示一个函数数组,用于替换命名队列中的现有函数）

dequeue(name)：删除匹配集中每个元素的命名队列中的第一个函数（最先传入的函数），并为每个元素执行此函数。（省略name则默认为特效队列名称fx）

clearQueue(name)：从命名队列中删除所有未执行的函数。（省略name则默认为特效队列名称fx）

注：队列函数queue()中的回调函数是jQuery1.4引入的新特性，可以用next()方法来连接以运行队列中的下一项，当然也可以调用dequeue()方法。

$('message').fadeIn().delay(200).queue(function(text){    $(this).text('Hello World');    next();        //运行队列中的下一项}).animate({borderWidth:'+=10px;'});//也可以调用dequeue()方法$('message').fadeIn().delay(200).queue(function(text){    $(this).text('Hello World');    $(this).dequeue();        //替代next()方法}).animate({borderWidth:'+=10px;'});

 

动画队列顺序总结：

1.对于一组元素上的动画，当在一个animate()方法中应用多个属性时，动画是同时发生的。当以链式的写法应用动画方法时，动画是按照顺序发生的。

2.当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

 

代码片段集

//example1$('img').animate({    opacity:.25,    font-size:10,    width:'hide',    borderLeft:'hide',    borderRight:'hide',    paddingLeft:'hide',    paddingRight:'hide'    //可以实现'slideRight'效果（动画内容是元素宽度）},{    duration:400,    complete:function(){        this.text('Goodbye');    },    queue:true,    easing:swing   }

 

//example2////jQuery动画框架允许为不同的CSS动画属性指定不同的缓动函数。//第一种方式，使用specialEasing选项$('img').animate({    width:'hide',    height:'hide',    opacity:'hide' },{specialEasing:{        width:'linear',        height:'linear'    }  });//第二种方式，在第一个对象参数中传入[目标值,缓动函数] 数组$('img').animate({    width:['hide','linear'],     height:['hide','linear'],     opacity:'hide'});

 

//example3//自定义缩放动画$('.animateMe').each(function(){    $(this).animate({        width:$(this).width()*2,        height:$(this).height()*2    },2000);});

 

//example4//自定义掉落动画$('.animateMe').each(function(){    $(this).css('position','relative').animate({        opacity:0,        top:$(window).height()-$(this).height()-$(this).position().top     //注意这里是$(window)    },'slow',function(){$(this).hide();}    );});

 

//example5//自定义消散动画$('.animateMe').each(function(){    var position=$(this).position();    $(this).css({
   　　position:'absolute',      top:position.top,       left:position:left     }).animate({        opacity:'hide',        width:$(this).width()*4,        height:$(this).height()*5,        top:position.top-($(this).height()/2*4),        left:position.left-($(this).width()/2*4)     },'normal');});