动画效果
步骤：
1. 导入JQ相关的文件
2. 文档加载完成事件:$(function):页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
下面举例几种方法：（其他的可以通过jQueryAPI文档查询）
$("#img1").show(3000); //显示图片 ，3000表示3秒
$("#img1").hide(3000); //隐藏图片
$("#img1").slideDown(3000); //图片向下展开
$("#img1").slideUp(3000); //图片向上收起
$("#img1").fadeIn(3000); //淡入
$("#img1").fadeOut(3000); //淡出
$("#img1").animate({width:"1000px",opacity:"1"},5000); 自定义的效果 //opacity:透明度范围0-1
$("#img1").animate({width:"500px",opacity:"0.1"},5000);
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//文档加载完成事件
$(function(){
//显示页面图片
$("#btn1").click(function(){
//获得img
//$("#img1").show(3000); //显示图片 ，3000表示3秒
//$("#img1").slideDown(3000); //图片向下展开
//$("#img1").fadeIn(3000); //淡入
$("#img1").animate({width:"1000px",opacity:"1"},5000);//opacity:透明度
})
//隐藏页面图片
$("#btn2").click(function(){
//获得img
//$("#img1").hide(3000); //隐藏图片，3000表示3秒
//$("#img1").slideUp(3000); //图片向上收起
// $("#img1").fadeOut(3000); //淡出
$("#img1").animate({width:"500px",opacity:"0.1"},5000);
});
})
</script>
</head>
<body>
<input type="button" value="显示" id="btn1" />
<input type="button" value="隐藏" id="btn2" />
<img src="../../img/4.gif" id="img1" width="800px"/>
</body>
</html>