jQuery效果—隐藏/显示，淡入/淡出，滑动，动画
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用"自定义"的动画 |
| clearQueue() | 对被选元素移除所有排队函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 移除下一个排队函数，然后执行函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之间进行切换 |
| finish() | 对被选元素停止、移除并完成所有排队动画 |
| hide() | 隐藏被选元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之间的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止被选元素上当前正在运行的动画 |
| toggle() | hide() 和 show() 方法之间的切换 |
（一）隐藏和显示
hide（）：隐藏
$("#hide").click(function(){
$("p").hide();
});
show（）:显示
$("#show").click(function(){
$("p").show();
});
show（）和hide（）括号中可选的参数：规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可添加函数：隐藏或显示完成后所执行的函数名称。
$(function(){
$(".btn").click(function(){
$("div").hide(1000,"linear",function(){
alert("div已消失");
});
});
});
toggle()：隐藏和切换自动切换
$("button").click(function(){
$("p").toggle();
});
（二）淡入/淡出
fadeIn()：淡入
$(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
fadeOut():淡出
$(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
fadeToggle（）：淡入淡出切换
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
fadeTo（）：渐变为给定的不透明度
$(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
注意：fadeTo() 没有默认参数，必须加上 slow/fast/Time
（三）滑动
slideDown()：向下滑动
$(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
slideUp()：向上滑动
$(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
slideToggle()：切换向上向下滑动
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
（四）动画-animate（）
操作单个属性
$(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
操作多个属性
$(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
相对于当前值变化
$(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
使用队列：先执行完一个样式，接着再执行一个样式
$(function(){
$("button").click(function(){
$("div").animate({height:'300px',opacity:'0.4'},"slow")
.animate({width:'300px',opacity:'0.8'},"slow")
.animate({height:'100px',opacity:'0.4'},"slow")
.animate({width:'100px',opacity:'0.8'},"slow")
});
});
delay（）–延迟动画
执行完一个动画后，延迟多久再执行下一个
$("#div1").click(function(){
$(this)
.animate({width: 200}, 2000)
.delay(4000)
.animate({height: 200}, 2000)
.animate({opacity: 0.5}, 2000);
});
stop（）–停止动画
在stop（）中设置参数为true，是停止所有的动画
$(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
在上述效果中有没有回调函数的区别
如以下的实例中，有回调函数时，会再隐藏效果完成后再弹出警告框
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
如以下的实例中，没有回调函数时，警告框会在隐藏效果完成前弹出
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});