jQuery 标签淡入淡出 个人随笔

时间：2023-03-08 23:31:18
jQuery 标签淡入淡出 个人随笔 
<!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>