JQuery框架中众多的动画与特效方法极大的提高了页面的用户体验度，通过少量的几行代码就可以实现淡入淡出，“拉窗帘”，等动画效果并且可以自定义各种动画效果。
1.显示与隐藏动画效果
1.1 ：show()方法和hide()方法
show()方法显现当前元素，hide()方法会动态的改变元素的高度宽度不透明度最终隐藏元素，此时元素的css属性display修改为none
语法：JQuery对象.show(动画效果运行时间，动画完成时执行的函数);
示例：
<script src="./jquery-1.11.0.min.js"></script>
<script>
$(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
1.2：toggle()方法
toggle()方法和show()方法参数意义一样不多做解释
该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种切换的效果
语法：JQuery对象.toggle(动画效果运行时间，动画完成时执行的函数);
<script src="./jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("dd").toggle();
});
});
</script>
</head>
<body>
<p id="dd">你好吗啊</p>
<button id="but">点击</button>
</body>
2:淡入淡出动画效果
2.1 ：fadeln()方法与afdeout()方法也具备改变元素的显示与隐藏的功效，但只改变他的透明度
语法与show()方法和hide()方法相似
实例：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
2.2:
fadeToggle()方法与toggle()方法有点相似但也只改变其透明度
如果元素可见则通过淡出效果切换为隐藏，如果元素不可见则通过淡入 效果切换到可见
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
2.3:滑入与画出动态效果用slideDown(),和slideUp()方法
这二个方法就是改变当前元素的高度上下滑动形成一种拉窗帘的效果
实例：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
