五、动画效果Animated Effects
jQuery的动画效果框架定义了一些简单的动画效果方法，如fadeIn(),fadeOut，也定义了更通用更复杂的动画方法animate。首先了解下jQuery框架动画效果框架的一些通过特性：
a. 效果有一个持续时间，可以是一个毫秒为单位的数值，也可以是一个字符串，如"fast"表示200ms，"slow"表示600ms，如果使用的字符串jQuery不识别，使用默认的400ms；我们可以定义自己的字符串表示不同的持续时间，方法是：jQuery.fx.speeds["yourname"]=number; 如jQuery.fx.speeds["medium-fast"]=300;jQuery.fx.speeds["medium-slow"]=500;
jQuery的效果方法，一般第一个参数就是持续时间，如果漏写，使用默认的400ms
b. jQuery效果方法的执行时异步的，jQuery效果方法的第二个参数是一个回调函数，效果执行结束时被调用，如：$("mymsg").fadeIn("slow",function(){$(this).text("hello world!");});
c. 默认情况下，jQuery的效果的是排队执行的，前一个执行完，后一个才执行，如先闪烁再显示的效果：$("blink").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();
d. 效果方法接受可选的持续时间和回调函数参数，也可以接受一个包含这些属性的对象作为参数，如：$("#msg").fadeIn({duration:"slow",complete:function(){$(this).text("hello world!");}});
1、简单效果
jQuery定义了9个简答效果方法来控制元素的显示与隐藏，可以分为3组：
（1）fadeIn,fadeOut,fadeTo 实际上是通过CSS的opacity来实现的，元素本来还是在文档中。
（2）show，hide，toggle 实际上是通过CSS的display来实现的，如果隐藏，元素是从文档中移除了的。
（3）slideDown,slideUp,slideToggle 通过改变元素的height以及CSS属性display来实现卷帘的滑动效果。
不同的jQuery插件为该库添加了额外的UI效果方法，其中jQueryUI库包括了丰富的效果方法。
2、自定义效果animate方法
使用animate()方法可以自定义更通用的效果。
animate的第一个参数是一个对象，表示效果执行的目标。该对象的属性为元素的CSS属性，值为该CSS属性的目标值。表示的效果为，元素的CSS属性从其当前值过渡到目标值
如：$("img").animate({height:0});把所有图片的高度缩小到0.
第二个参数，可以是一个选项对象，如：$("img").animate({height:0},{duration:300,complete:funciton(){...}});
第二个参数可以直接是持续时间，此时第三个参数为缓动函数easing function，第四个参数为回调函数。
最通用的情况是，animate接受两个对象参数，第一个表示要对什么进行动画，第二个表示怎么动画。
（1）对什么进行动画？
作为animate的第一个参数，必须是一个对象，该对象的属性名是CSS属性名，值为这些属性在执行动画后到达的目标值。只有数值类的属性可以对其进行动画操作，color，font以及枚举类如display等非数值类的属性不能对其进行动画操作。在表示值的字符串前面加上+=或者-=表示相对值，如：$("p").animate({"margin-left":"+=.5in",opacity:"-=.1"});
表示值的字符串除了可以是数值（+=,-=前缀，数值，单位后缀）以外，还有其他3个值可以使用："hide","show","toggle"
（2）怎么样动画？
animate的第二个可选参数对象，是用来表示动画如何执行的。该对象的属性有：
duration: 表示持续时间，可以是数值，或者预定义的字符串，如："fast"
complete: 表示动画结束时的回调函数。
step: 动画没执行一步时的回调函数，元素本身用this变量表示，元素动画的目标属性的当前值作为第一个参数传到step函数
queue: ture/false 表示该动画是否排队。默认都是需要排队的，不排队的动画是立即执行的，不需要等上一个动画结束后再执行。
如：$("img").fadeIn(500).animate({width:"+=100"},{queue:false,duration:1000}).fadeOut(500);
easing: 表示缓动函数的字符串，如：$("img").animate({width:"+=100"},100,"linear");
specialEasing: 表示自定义的缓动函数，如：$("img").animate({width:"hide",height:"hide",opacity:"hide"},{specialEasing:{width:"linear",height:"linear"}});
上例为不同的CSS属性设置了不同的缓动函数，达到这一功能的另一个写法是：$("img").animate({width:["hide","linear"],height:["hide","linear"],opacity:"hide"});
什么是缓动函数？
比如一个动画$("img").animate({opacity:"hide"},{duration:400});该动画是在400ms内把图片的透明度从1减少到0，那么在100ms的时候，应该设置图片的透明度为多少？
最直接和最天真的方法就是线性计算，100ms是400ms的1/4，那么opacity应该设置为0.75. 然而实践证明这种方式产生的动画视觉效果不是很好，非线性可能更好。
基于此，jQuery引入了缓动函数，缓动函数把动画已完成时间的百分比映射到动画属性的目标值。
jQuery默认的缓动函数是一个正弦曲线，先慢，再快，最后慢。jQuery给每个缓动函数一个名字，默认缓动函数的名字为"swing"，jQuery也定义了一个线性的缓动函数，名字为"linear"。
我们可以定义自己的缓动函数并命名，方法是：jQuery.easing["name"]=f; 如：jQuery.easing["squareroot"]=Math.sqrt;
jQueryUI库及jQuery缓动插件定义了丰富的缓动函数。
3、动画的取消，延迟以及动画队列
（1）stop，停止当前正在执行的动画。接受两个boolean参数。第一个表示是否清除存在的动画队列，缺失或者为false的时候表示不清除；第二个表示元素的动画属性是设置成目标值还是当前值，确实或者为false时表示设置为当前值。如：$("img").bind({"mouseover":function{$(this).stop().fadeTo(300,1.0);},"mouseout":function{$(this).stop().fadeTo(300,0.5);}});
（2）delay，延迟动画队列指定的时间。接受两个参数，第一个为延迟时间，单位毫秒，第二个为可选参数，指定延迟队列的名字。如：$("img").fadeTo(100,.5).delay(200).slideUp();
（3）jQuery动画队列是按顺序执行的函数列表，每个队列和一个文档元素关联，不同元素的队列之间相互独立。
queue() --添加一个函数到队列中，当一个函数到达队列的头部时，该函数出列，并且被调用，this表示队列所关联的元素。你的函数被调用时，jQuery会传递一个函数参数，该函数参数在你的函数执行结束时必须被调用，其功能是在队列上执行next的操作（出列），如果你不调用该函数，那么队列会被阻止以至于队列中的其他函数不能执行。如：
$("#msg").fadeIn().delay(200).queue(function(next){$(this).text("hello,world");next();}).animate({border-width:"+=10px;"});//next是函数，必须调用
dequeue() --从队列中出列一个函数，并执行。队列函数参数特性是jQuery1.4的新特性，1.4之前使用dequeue()来出列，如上面的例子1.4前应该为：$("#msg").fadeIn().delay(200).queue(function(){$(this).text("hello,world");$(this).dequeue();}).animate({border-width:"+=10px;"});
clearQueue() --清除一个元素上的队列。
给queue()方法传入一个函数，表示把函数添加到队列，如果传入一个函数的数组，表示用该函数数组替换原来的队列。并且这两种方法都是把当前队列作为数组返回。
queue,dequeue方法，也定义了jQuery的功能函数，如：$(e).queue(f)等同于jQuery.queue(e,f); e为元素，f为函数
queue,dequeue,clearQueue都使用可选的队列名作为第一个参数，如果没有指定，jQuery默认队列名为"fx"。
jQuery的队列在异步执行一系列有序操作是非常有用，我们只需把操作置入队列中，并且传入一个非"fx"的队列名称，队列中的函数不会自动执行，我们必须显示的调用dequeue使队列中的函数出列，然后函数才会被调用。
