JQuery动画show-hide、fadeIn-fadeOut、slideUp-slideDowsn简单应用

在前端我们利用JQuery可以用很少的代码做出非常炫酷的动画效果，这里就简单的介绍一下JQuery里面三个基本动画shwo/hide、fadeIn/fadeOut、slideUp/slideDown的应用。

实现之后的效果页面可以点击这里。

show/hide表示现实与隐藏，控件由小变大，或者由大变小
fadeIn/fadeOut表示淡入淡出，控件通过改变透明度来实现现实与隐藏效果
slideUp/slideDown表示上滑与下滑，通过改变控件的高度来实现动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画演示</title>
	</head>
	<style type="text/css">
		#img{
			display: none;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 显示与隐藏
			$("#btn1").click(function(){
				$("#img").toggle(500);
			})
			// 上滑与下滑
			$("#btn2").click(function(){
				$("#img").slideToggle(500);
			})
			// 淡入淡出
			$("#btn3").click(function(){
				$("#img").fadeToggle(500);
			})
		})
	</script>
	<body>
		<input type="button" name="" id="btn1" value="show/hide" />
		<input type="button" name="" id="btn2" value="slideUp/slideDown" />
		<input type="button" name="" id="btn3" value="fadeIn/fadeOut" /><br />
		<p></p>
		<img src="img/003.jpg" width="320px" id="img"/>
	</body>
</html>

这是最终实现之后的效果图：

动画效果