jQuery中的动画与效果
1、基本效果
隐藏元素
hide(speed,[callback]);
显示元素
show(speed,[callback])
交替显示隐藏
toggle(speed,[callback])
速度对应的有三个常量，为”slow” “nomal” “fast”
三种速度的值分别为600毫秒、400毫秒和200毫秒
回调函数每个元素执行一次
2、滑动效果
向上收缩(卷起)
slideUp(speed,[callback]);
向下展开
slideDown(speed,[callback]);
交替伸缩样式
slideToggle(speed,[callback]);
3、淡入淡出效果
淡入效果
fadeIn(speed,[callback]);
淡出效果
fadeOut(speed,[callback]);
自定义不透明度
fadeTo(speed,opacity,[callback]);
上面两种方式要么淡入要么淡出，不能停留在中间的某个状态，自定义不透明度可以实现。
第一个和第三个参数和上面是一样的，opacity是要调整到的不透明度值(0到1之间的数字)
如果是0和fadeOut的效果一样，参数调整为1和fadeIn的效果一样。
调用方式：$(“first”).fadeTo(“slow”,0.3);
页面淡入淡出的透明度范围为0~0.3。
4、自定义动画效果
自定义动画animate(params[,duration[,easing[,callback]]])
prarms一组包含作为动画属性和终值样式属性及其值的集合
duration (可选)三种预订速度之一的字符串，或者表示动画时长的毫秒数值(如1000)
easing (可选)要使用的擦除效果的名称(需要插件支持)，默认jQuery支持linear和swing
callback (可选)在动画执行完成时的回调函数
$("#block").animate({
width: "70%",
height: "100%",
fontSize: "4em"
}, 1000 );
属性值里面的格式和CSS相似，但也有区别如字体的设置，在CSS中是font-size: 4em，而在动画的属性值中是fontSize:”4em” 。
animate实现的显示和隐藏：
$("#toggle").click(function(){
$("#block").animate({
height: \'toggle\', opacity: \'toggle\'
}, 3000);
});
代码中height和opacity在有和无之间进行切换，这样就和显示隐藏的效果基本一样。
animate函数还有另外一种使用方式，它可以只带两个参数
animate(params,options) 用于创建自定义的动画
第一个参数和之前的一样，表示一组动画属性值，第二个参数为一组选项设置，用于设置动画速度、
easing插件样式、是否加入动画队列等，可用的选项如下：
duration 速度选项
easing 擦除效果选项
complete 动画完成时执行的函数
step callback函数
queue 是否将此动画进入循环队列
调用方式为：
$("#block").animate({
width:"70%"
heigth:"100%",
fontSize:"4em"
},{duration:1000}
);
5、jQuery动画队列
对于一个元素可以应用多个动画效果，为便于管理引入了动画队列的概念，
$("#go1").click(function(){
$("#block2").animate( { width: "70%"}, 1000 )
.animate( { fontSize: \'5em\' } , 1000 )
.animate( { paddingLeft: \'20px\' }, 1000);
});
上面是队列动画，queue使用默认值为true，三个动画依次执行，而下面是非队列动画，一次执行三个
$("#go2").click(function(){
$("#block1").animate( { width: "70%"}, { queue: false, duration: 1000 } )
.animate( { fontSize: \'5em\' } , { queue: false, duration: 1000 } )
.animate( { paddingLeft: \'20px\' }, { queue: false, duration: 1000 });
});
jQuery中的queue()函数
$("#show").click(function () {
var n = $("p").queue("fx");
$("span").text("队列的长度是: " + n.length);
});
function runIt() {
$("p").show("slow");
$("p").animate({left:\'+=200\'},2000);
$("p").slideToggle(1000);
$("p").slideToggle("fast");
$("p").animate({left:\'-=200\'},1500);
$("p").hide("slow");
$("p").show(1200);
$("p").slideUp("normal", runIt);
}
runIt();
这段代码调用queue(“fx”)函数取得作用于标签<p>上的动画队列，然后使用length获得其长度
jQuery还有其他一些比较常用的用法
queue(callback)
queue(queue) 传入动画队列作为参数
dequeue() 用于从动画队列中移除一个队列函数