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() 用于从动画队列中移除一个队列函数