<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery test</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//加载时执行
$(function(){
});
function fadein(){
//淡入 slow 慢 fast 快 normal 正常
$('#tb').fadeIn();
}
function fadeout(){
//淡出 slow 慢 fast 快 normal 正常
$('#tb').fadeOut();
}
function fade(){
//动画效果
//$('#tb').toggle('slow');
//sideToggle 滑动切换， slideUp 向上滑动，slideDown 向下滑动
//$('#tb').slideToggle('slow');
}
</script>
</head>
<body>
<p>jquery test </p>
<br>
<table id="tb">
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>24</td></tr>
<tr><td>b</td><td>22</td></tr>
<tr><td>c</td><td>21</td></tr>
<tr><td>d</td><td>20</td></tr>
<tr><td>e</td><td>24</td></tr>
<tr><td>f</td><td>23</td></tr>
<tbody>
<tfoot>
</tfoot>
</table>
<input type="button" onclick="fadeout()" value="淡出" />
<input type="button" onclick="fadein()" value="淡入" />
<input type="button" onclick="fade()" id="fade" value="动画效果" />
</body>
</html>