最近正在学习Jquery，跟着教程自己写了个动画效果，最基本的，都不要见笑哟（o(∩_∩)o 哈哈）。
首先，我们准备几张素材图片用来显示。
接着添加个按钮来实现图片的还原效果。
事例代码：
<!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>Jqury 动画之-简单动画入门</title>
<!-- 引入Jqury 库 -->
<script type="text/javascript" src="Script/jquery-1.3.2.min.js"></script>
<!-- 样式 -->
<style type="text/css">
ul li{ list-style:none; float:left;}
</style>
</head>
<body>
<div>
<ul>
<li><img src="Image/01.jpg" alt="01"/></li>
<li><img src="Image/02.jpg" alt="02"/></li>
<li><img src="Image/03.jpg" alt="03"/></li>
<li><img src="Image/04.jpg" alt="04"/></li>
<li><img src="Image/05.jpg" alt="05"/></li>
</ul>
<input type="button" value="还 原" id="btnShow" />
<script language="javascript" type="text/javascript">
//设定动画速度
var speed = 600;
//给图片添加点击事件，点击后图片隐藏。如果嫌图片麻烦，可以替换为div也行
$("img").bind("click", function (event) {
$(this).hide(speed);
});
//还原显示所有图片。
$("#btnShow").bind("click", function (event) {
$(":img").show(speed);
});
</script>
</div>
</body>
</html>
效果预览：
2、
3、
真像教程里面所说的，有了Jquery，天天喝茶水。