jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()
jQuery动画
以下JS代码公用的HTML：
<span style="font-size:14px;"><div class="control">
<buttontype="button" class="button"id="sp2">Show:Paragraph 2</button>
<buttontype="button" class="button"id="sp23">Show:Paragraph 2&3</button>
<buttontype="button" class="button"id="hp2">Hide:Paragraph 2</button>
<buttontype="button" class="button"id="hp23">Hide:Paragraph 2&3</button>
</div>
<div class="content">
<div><h3>Introduction</h3><p>Inaddition to being ……</p></div>
<div><h3>Howit works</h3><p>It turns out t……</p></div>
<div><h3>Howto get involved</h3><p>Visual Event is ……</p></div>
<div><h3>BuildingVisual Event</h3><p>In order to run a local copy ……</p></div>
</div></span>
1. 隐藏和显示元素
.hide()/.show()
使用.hide()/.show()会同时改变被选元素的高度、宽度和透明度，参数为duration（毫秒）或‘slow’/‘fast’，也可以不加参数，不加参数效果与display：none/block；效果一致。
例如：
<span style="font-size:14px;">$('.content div').eq(1).show(2000); //使第二段内容显示，动画持续时间为2秒</span>
2. 淡入和淡出
.fadeIn()/.fadeOut()
使用.fadeIn()/.fadeOut()会改变被选元素的透明度，参数为duration（毫秒）或‘slow’/‘fast’。
<span style="font-size:14px;">例如：$('.content div').eq(1).fadeIn('slow'); //使第二段内容显示，动画持续时间slow</span>
3. 滑上和滑下
.slideUp()/.slideDown()
使用.slideUp()/.slideDown()会使被选元素由页面上滑动出现或滑出页面，参数为duration（毫秒）或‘slow’/‘fast’。
<span style="font-size:14px;">例如：
$('.content div').eq(1).slideDown('slow'); //使得第二段内容由上滑动向下显示出来</span>
4. 切换可见性
.toggle()/.slideToggle()
.toggle()/.slideToggle()会在被选元素显示时隐藏元素，在隐藏时显示元素。不同之处是显示和隐藏元素时动画效果，.toggle()会同时改变元素的高度、宽度和透明度，而.slideToggle()则通过改变元素高度来完成动画。参数同上。
例如：
<span style="font-size:14px;">varsp2=$('#sp2');
sp2.click(function(){
$('.contentdiv').eq(1).slideToggle('slow');
});</span>
5. 自定义动画
5.1 单一元素单一动画
.animate()
参数：
<span style="font-size:14px;">.animate({property1:’value1’,property2:’value2’……},
duration,easing,function(){
//callbackfunction
});
.animate({
property1:‘value1’,
property2:‘value2’
……
},{
duration:‘value’,
easing:‘value’,
complete:function(){},
queue:true/false,
step:callback
});</span>
例如:
<span style="font-size:14px;">varsp2=$('#sp2');
sp2.click(function(){
$('.content div').eq(1).animate({height:'toggle'},'slow');
});</span>
5.2 单一元素单多动画
5.2.1单一元素队列动画
通过对同一组元素连缀.animate()可以实现队列动画效果
例如：
<span style="font-size:14px;">var sp2=$('#sp2');
sp2.click(function(){
$('.contentdiv').eq(1).animate({height:'toggle'},'slow')
.animate({opacity:0.5},'slow');
});</span>
5.2.2 单一元素同时动画
在.animate()里同时加入多个属性，动画同时发生
例如：
<span style="font-size:14px;">varsp2=$('#sp2');
sp2.click(function(){
$('.content div').eq(1).animate({height:'toggle',opacity:0.5},'slow');
});</span>
5.2.3 穿越队列
把.animate()的queue设为false
例如：
<span style="font-size:14px;">varsp2=$('#sp2');
sp2.click(function(){
$('.contentdiv').eq(1).animate({height:'toggle'},'slow').animate({fontSize:'20px'},{
duration:'slow',
queue:false
}).animate({opacity:'0.5'},'slow');
});</span>
5.3 多元素多动画
5.3.1 多元素同时动画
当为不同元素增加动画时，这些动画几乎会同时发生。
例如：
<span style="font-size:14px;">varsp2=$('#sp2');
sp2.click(function(){
$('.contentdiv').eq(1).animate({height:'toggle'},'slow')
.animate({opacity:'0.5'},'slow');
$('.contentdiv').eq(2).animate({height:'toggle'},'slow')
.animate({opacity:'0.5'},'slow');
}); //段落2和段落3的动画同时发生，两个段落都是先高度变化再透明度变化</span>
5.3.2 多元素队列动画
此时需要调用.animate()的回调函数
例如：
<span style="font-size:14px;">var sp2=$('#sp2');
sp2.click(function(){
$('.contentdiv').eq(1).animate({height:'toggle'},'slow')
.animate({opacity:'0.5'},{duration:'slow',complete:function(){
$('.contentdiv').eq(2).animate({height:'toggle'},'slow')
.animate({opacity:'0.5'},'slow');
}});
});</span>