jQuery 四大动画效果 与 事件切换【入门篇超详细 零基础适用】
在艰难的原生 JS 路上我们是否做过各种各样的动画效果呢，例如轮播图的动画函数，下拉菜单，但是其实之前的显示与隐藏等小操作都属于动画效果，在 jQuery 领域我们可以将这些显示隐藏放慢100倍 1000倍来让你看清楚其动画效果，这些就用到了显示与隐藏的 隐藏参数，下面大家看一下 jQuery 为我们写好了哪些动画函数呢？
在开始前先给各位来一个温馨注意事项：" 动画函数只要触发就一定会执行，这句话在第四板块会提及到，大家多注意 "
jQuery 已封装好的动画函数分类
：
显示隐藏效果
滑动效果（事件切换，动画排队现象）
淡入淡出效果
自定义动画
" 此篇文章就带大家了解这些方法，走进更为简便的动画世界 ！！"
文章目录：
一 ：显示与隐藏
参数含义：
1.1 显示函数 show
显示效果：
1.2 隐藏函数 hide
隐藏效果：
1.3 显示隐藏切换函数 toggle
显示切换效果：
隐藏切换效果：
二 ：滑动效果
参数含义：
2.1 下拉函数 slideDown
下拉效果：
2.2 上拉函数 slideUp
上拉效果：
2.3 上拉下拉切换函数 slideToggle
下拉显示效果：
上拉隐藏效果：
三 ：事件切换
3.1 下拉菜单普通写法：
3.2 下拉菜单切换函数写法：
3.3 下拉菜单最简写法 ( 只有一个函数 )：
四 ：动画排队现象：
改进下拉菜单（停止了动画排队现象）：
五 ：淡入淡出效果
参数含义：
5.1 淡入函数 fadeIn
淡入效果：
5.2 淡出函数 fadeOut
淡出效果：
5.3 淡入淡出转换函数 fadeToggle
淡入显示效果：
淡出隐藏效果：
5.4 不透明度改变函数 fadeTo
不透明度切换效果：
六 ：自定义动画 animate
参数含义:
6.1 自定义动画animate 案例
自定义动画改变效果：
一：显示与隐藏
显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了，那就是 show()，hide()，但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数，其实这两个方法是有隐藏参数的，当然 可以带参数可以不带参数。
- show ( speed，easing，fn ) ：显示
- hide ( speed，easing，fn ) ：隐藏
- toggle ( speed，easing，fn ) ：显示隐藏切换
参数含义：
| 参数 | speed | easing | fn |
| 含义 | 速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值 | 用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写 | 回调函数，在动画执行完后调用动画函数内的内容 |
1.1 显示函数 show
show ( speed，easing，fn )，可以带参数可以不带参数，可以让元素显示，下面代码的意义为，显示的过程为5000毫秒(5秒) ，显示过后会调用回调函数，并且过程以 swing 的方式过渡
div{ width: 300px; height: 300px; background-color: rgb(255, 146, 146); display: none; } $('div').show(5000,'swing',function(){ alert('show 执行完啦') }) 
显示效果：
1.2 隐藏函数 hide
hide ( speed，easing，fn )，可以带参数可以不带参数，可以将显示的元素隐藏，以下代码含义为，隐藏的过程为5000毫秒(5秒) ，隐藏过后会调用回调函数，并且过程以 swing 的方式过渡
div{ width: 300px; height: 300px; background-color: rgb(255, 146, 146); } $('div').hide(5000,'swing',function(){ alert('hide 执行完啦') }) 隐藏效果：
1.3 显示隐藏切换函数 toggle
toggle ( speed，easing，fn ) ，可以带参数可以不带参数，可以切换元素，其实是判断该元素是否显示，如果此元素是显示的，则给它隐藏，如果此元素是隐藏的，则给它显示。
div{ width: 200px; height: 200px; background-color: rgb(255, 146, 146); } $('button').click(function(){ $('div').toggle(2000,'swing',function(){ alert('我切换啦') }) }) 
显示切换效果：
隐藏切换效果：
二：滑动效果
- slideDown ( speed，easing，fn ) ：下拉
- slideUp ( speed，easing，fn ) ：上拉
- slideToggle ( speed，easing，fn ) ：上拉下拉切换
参数含义：
| 参数 | speed | easing | fn |
| 含义 | 速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值 | 用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写 | 回调函数，在动画执行完后调用动画函数内的内容 |
2.1 下拉函数 slideDown
slideDown ( speed，easing，fn )，可以带参数可以不带参数，可以让元素以下拉的形式慢慢显示出来
div{width: 300px;height: 400px;background-color: rgb(255, 181, 181);display: none; } $('button').click(function(){ $('div').slideDown(2000,'swing',function(){ alert('我下拉了') }) }) 下拉效果：
2.2 上拉函数 slideUp
slideUp ( speed，easing，fn ) ，可以带参数也可以不带，可以让元素以上拉的形式慢慢隐藏起来
div{width: 300px;height: 400px;background-color: rgb(255, 181, 181); } $('button').click(function(){ $('div').slideUp(2000,'swing',function(){ alert('我上拉了') }) }) 上拉效果：
2.3 上拉下拉切换函数 slideToggle
slideToggle ( speed，easing，fn ) ，可以带参数可以不带参数，可以切换元素上拉下拉，其实是判断该元素是否显示，如果此元素是显示的，则给它上拉隐藏，如果此元素是隐藏的，则给它下拉显示。
div{width: 300px;height: 400px;background-color: rgb(255, 181, 181); } $('button').click(function(){ $('div').slideToggle(2000,'swing',function(){ alert('我切换了') }) }) 下拉显示效果：
上拉隐藏效果：
三：事件切换
$( 'ele' ) . hover ( function() {触发函数} , function() {移除函数} )
我们先看看不用切换函数的话应该怎么写：
3.1 下拉菜单普通写法：
- 第一章
- 第二章
- 第三章
$('.banner').mouseover(function(){ $('.mapbox').slideDown(150) }) $('.banner').mouseout(function(){ $('.mapbox').slideUp(150) }) 3.2 下拉菜单切换函数写法：
- 第一章
- 第二章
- 第三章
$('.banner').hover(function(){ $('.mapbox').slideDown('150')},function(){ $('.mapbox').slideUp('150')}) 3.3 下拉菜单最简写法 ( 只有一个函数 )：
实现原理：里面只写一个函数的话，经过离开都会触发函数从而触发里面的内容
- 第一章
- 第二章
- 第三章
$('.banner').hover(function(){ $('.mapbox').slideToggle('150')}) 四：动画排队现象：
动画函数一旦触发必定执行完毕，意味着如果刚才的下拉菜单我们迅速地经过了十次，那么哪怕你不再移动上去，它也会把这十次给做完，这就是动画排队现象，这明显是不符合我们对下拉菜单效果的期望的，因此我们需要学习如何停止动画排队现象
处理方法：stop ()
注意一定要放在动画函数的前面 ！！！这个方法就是触发时先停止之前的动画，再执行本次动画函数，其实有些类似于排他思想
改进下拉菜单（停止了动画排队现象）：
$('.banner').hover(function(){ $('.mapbox').stop().slideToggle('150') //注意stop 方法写在动画函数前面，先停止动画，再执行动画 }) 五：淡入淡出效果
- fadeIn ( speed，easing，fn ) ：淡入
- fadeOut ( speed，easing，fn ) ：淡出
- fadeToggle ( speed，easing，fn ) ：淡入淡出效果切换
- fadeTo ( speed，opacity，easing，fn ) ：修改不透明度（speed，opcity 必写）
参数含义：
| 参数 | speed | easing | fn | opacity |
| 含义 | 速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值 | 用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写 | 回调函数，在动画执行完后调用动画函数内的内容 | 不透明度，取值 0-1 |
5.1 淡入函数 fadeIn
让元素慢慢的显示出来，参数可写可不写
div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); display: none; } $('button').click(function(){ $('div').fadeIn(2000,'swing',function(){ alert('我淡入啦') }) }) 淡入效果：
5.2 淡出函数 fadeOut
div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); } $('button').click(function(){ $('div').fadeOut(2000,'swing',function(){ alert('我淡出啦') }) }) 淡出效果：
5.3 淡入淡出转换函数 fadeToggle
用于淡入淡出的切换，其实为判断有没有显示或隐藏，如果显示了，就让其淡出隐藏，如果没有显示，就淡入显示
div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); } $('button').click(function(){ $('div').fadeToggle(2000,'swing',function(){ alert('我切换啦') }) }) 淡入显示效果：
淡出隐藏效果：
5.4 不透明度改变函数 fadeTo
用于切换不透明度，参数为 0-1，这个 与 是 speed 必写参数
div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); } $('button').click(function(){ $('div').fadeTo(2000,0.3,function(){ alert('我切换不透明度啦') }) }) 不透明度切换效果：
六：自定义动画 animate
用法：animate ( params , speed , easing , fn ) params 为必写参数 ！！！
参数含义:
| 参数 | params | speed | easing | fn |
| 含义 | 写想要更改的样式属性，以对象形式传递，必写 | 速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值 | 用来指定特定的过度效果，默认为 swing，可换为 linear | 回调函数，在动画执行完后调用动画函数内的内容 |
6.1 自定义动画animate 案例
例如我们想让元素移动到距离左边 300px，距离上面 200px，宽度增加100px，高度增加 50px，并且不透明度变为 0.7，并要求 2s 完成，完成后弹出 “我完成啦”，用自定义动画就及其简单啦，注意以对象形式传入要改变的属性
div{ position: absolute; width: 300px; height: 300px; background-color: rgb(255, 188, 188); } $('button').click(function(){ $('div').animate( { "left":"300px", "top":"200px", "opacity":"0.7", "width":"400px" },2000,function(){ alert('我完成啦') }) }) 自定义动画改变效果：
至此为止，这就是jQuery的四大基本动画，谢谢大家支持！！
创作挑战赛 
新人创作奖励来咯，坚持创作打卡瓜分现金大奖