前言：
jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画效果：
最常见的有一下几种效果：
1.显示隐藏效果：
1.1语法：
show([speed],[easing],[fn]);//显示的语法
hide([speed],[easing],[fn]);//隐藏的语法1.2参数解释：
- 内部的参数都可以省略掉
- speed：有三个值可以选择（slow ，normal ，flst） 或者用毫秒数 （比如： 1000）
- easing: 用来指定切换效果 默认为“swing” 也可以用参数 linear
- fn：回调函数，在动画完成的时候执行的函数
1.3例子：
<body>
<p></p>
<button>隐藏</button>
<button>显示</button>
<script>
$(function(){
//隐藏
$("button").eq(0).click(function(){
$("p").hide(1000,function(){
alert("1");
});
})
//显示
$("button").eq(1).click(function(){
$("p").show(1000,function(){
alert("2");
});
})
})
</script>
</body>1.4隐藏和显示相互切换： toggle()
可以使用 toggle() 方法来切换 hide() 和 show() 方法, 显示被隐藏的元素，并隐藏已显示的元素：
1.4.1 语法： toggle([speed],[fn]);
注： 参数的含义与上面的一样
例子：
<button>切换</button>
<div></div>
//切换按钮
$("button").click(function(){
$("div").toggle(1000);
})2.淡入淡出效果：
在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：
fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()
2.1 fadIn() 方法 用于淡入已隐藏的元素
语法：
$(selector).fadeIn([speed],[easing],[callback]);参数解释：
- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
- easing: 用来指定切换效果 默认为“swing” 也可以用参数 linear
- 可选的 callback 参数是 fading 完成后所执行的函数名称。
例子：
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
}); 2.2 fadeOut()方法 用于淡出可见元素
语法：
$(selector).fadeOut([speed],[easing][callback]);例子：
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})2.3 fadeToggle()方法 可以在fadeIn()与 fadeOut()方法中进行切换
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：
$(selector).fadeToggle([speed],[easing],[callback]);例子：
$("button").eq(2).click(function(){
//淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})2.4 fadeTo()方法 可以修改元素透明度（值介于 0~1 之间）
语法：
$(selector).fadeTo(speed,opacity,[callback]);参数解释：
注意： 这个函数的 speed 是必须的参数
opacity 参数将效果设置为给定的不透明度 (0~1) 之间
例子：
$("button").eq(3).click(function(){
//修改透明度 fadeTo 这个速度和透明度都要写
$("div").fadeTo(1000,0.2);
})2.5 把这四个方法的例子结合在一起形成一个可以运行的例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=jquery.min.js></script>
<style>
div {
width:200px;
height:200px;
background-color:red;
};
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div style="display:none;"></div> //设置div默认属性为隐藏的
<script>
$(function(){
//淡入效果
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
});
//淡出效果
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})
// 切换效果
$("button").eq(2).click(function(){
//淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function(){
//修改透明度 fadeTo 这个速度和透明度都要写
$("div").fadeTo(1000,0.2);
})
})
</script>
</body>修改透明度的功能我们经常会用到，比如：当鼠标放在页面的某个地方就会高亮显示
3.滑动效果 滑动方法可使元素上下滑动
3.1 slideDown()方法 用于向下滑动元素
语法：
$(selector).slideDown([speed],[callback]);- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
- 可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
$("button").eq(0).click(function(){
//下滑动 slideDown()
$("div").slideDown();
})3.2 slideUp()方法 用于向上滑动元素
语法：
$(selector).slideUp([speed],[callback]);例子：
$("button").eq(1).click(function(){
//上滑动 slideup
$("div").slideup();
})3.3slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法：
$(selector).slideToggle([speed],[callback]);例子：
$("button").eq(2).click(function(){
//滑动切换 slideToggle()
$("div").slideToggle(500);
})