jQuery的动画操作
jQuery动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏，不可见就显示
以上动画方法都可以添加参数
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数（动画完成后自动调用的函数）
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值（0不可见，1完全可见，0.5半透明）
fadeToggle() 淡入/淡出 切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div#div1{
float:left;
border: 1px solid;
background-color: blue;
width: 300px;
height: 200px;
}
table,td {
border: 1px solid;
border-collapse: collapse;
float:left;
}
</style>
<!--引入jQuery库-->
<script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//show，
$("#btn1").click(function(){
$("#div1").show(1000,function(){
alert("show动画完成")
});
});
//hide
$("#btn2").click(function(){
$("#div1").hide(1000,function(){
alert("hide动画完成")
});
});
// var test=function(){
// $("#div1").toggle(1000,test);
// }
// test();
$("#btn3").click(function(){
$("#div1").toggle(1000);
});
//fadeIn，慢慢显现
$("#btn4").click(function(){
$("#div1").fadeIn(1000,function(){
alert("fadeIn完成")
});
});
//fadeOut
$("#btn5").click(function(){
$("#div1").fadeOut(1000);
});
$("#btn6").click(function(){
$("#div1").fadeTo(2000,0.5,function(){
alert("fadeTo完成")
});
});
$("#btn7").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<table>
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div id="div1" >
jQuery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
