1.1元素的显示与隐藏以及淡入淡出的动画效果
总结如下：
1.png
使用方法及示例如下：
//显示页面中的元素
show(duration,[fn]);
//隐藏页面中的元素
hide(duration,[fn]);
//模拟鼠标的连续单击事件
toggle(duration,[fn]);
//改变元素的透明度
fadeIn(duration,[fn]);
fadeOut(dutation,[fn]);
fadeToggle(duration,[fn]);
//调整透明度的值
fadeTo(duration,opacity,[fn]);
[ duration ]: 表示动画运行的时间，可以使用关键字slow、normal和fast，分别对应时间长度0.6秒0.4秒和0.2秒 [ fn ]: 表示在动画完成时执行的函数。
[ opacity ]: 用于指定不透明值，取值范围是0-1,0代表完全透明，1代表完全不透明
示例：
例：为页面添加一个“显示”按钮，当单击“显示”按钮时，将以动画的方式显示一幅图片完成时执行函数，实现为显示的图片添加边框样式的功能。再一次单击按钮，显示的图片以动画的方式隐藏
<head>
<script src="jquery-1.11.0.min.js"></script>
<style>
img{
display:none;//图片默认不显示
}
</style>
</head>
<body>
<p><img src="two.jpg" id="pic" /></p>
<input type="botton" value="显示" id="btn" />
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val() =="显示"){
$("#pic").show("slow",function(){
$(this).css({"border" :"1px solid #ccc","padding":"5px"});
});
$(this).val("隐藏")
}else{
$("#pic").hide("slow");
$(this).val("显示");
}
});
});
</script>
</body>
1.2 滑入与滑出动画效果
1.2.1 slideDown()方法、slideUp()方法与slideToggle()方法
①slideDown()方法会动态改变当前元素的高度，由上到下滑入，高度向下增大，呈现出一种“滑动”的效果.
②slideUp()方法会动态改变当前元素的高度，由下到上滑出，高度向上减小，最终隐藏当前元素.
③slideToggle()方法会动态改变当前元素的高度，最终切换当前元素的可见状态(如果元素是可见的，则通过滑出效果切换为隐藏状态；如果元素是隐藏的，则通过滑入效果切换为可见状态
【使用方法同show()一致】
例：
<script type="text/javascript">
$(function(){
$(".secondLi").click(function(){
$(".secondLi ul").slideToggle(500);
});
});
</script>
