[TOC] # 3\. jQuery效果（动画效果） jQuery给我们封装了很多动画效果,最为常见的如下:  ## 3.1显示隐藏效果 1.显示语法规范 ~~~ show ( [ speed,[easing] , [fn] ] ) ~~~ 2.隐藏语法规范 ~~~ hide ( [speed, [easing] , [fn] ]) ~~~ 3.切换语法规范 ~~~ toggle ( [speed, [easing] , [fn]]) ~~~ ### 显示隐藏参数 (1)参数都可以省略，无动画直接显示。 ( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如:1000)。（慢 正常 快） ( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”（匀速）。 ( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。 ## 3.2滑动效果 1.下滑效果语法规范 ~~~ slideDown ( [speed, [easing] , [fn] ]) ~~~ 2.下滑效果语法规范 ~~~ slideUp ( [speed, [easing] , [fn] ]) ~~~ 3.滑动切换效果语法规范 ~~~ slideToggle([speed, [easing] ,[fn] ]) ~~~ ### 滑动效果参数 (1)参数都可以省略。 ( 2 ) speed:三种预定速度之一的字符串( “slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如∶1000)。 ( 3 ) easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。 ( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。 ## 3.3事件切换 ~~~ hover([over],Jout) hover(function(){},function(){}) ~~~ ( 1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter ) ( 2 ) out:鼠标移出元素要触发的函数（相当于mouseleave ) ### 2.事件切换hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数  ## 3.4 动画队列及其停止排队方法 1.动画或效果队列 动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。 2.停止排队 stop() (1 ) stop()方法用于停止动画或效果。 (2)注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。 ### 下滑菜单  ## 3.5淡入淡出效果 1.淡入效果语法规范 ~~~ fadeIn ( [speed, [easing] , [fn] ]) ~~~ 2.淡出效果语法规范 ~~~ fadeout ( [speed , [easing] , [fn]]) ~~~ 3.淡出淡入切换效果语法规范 ~~~ fadeToggle ( [speed , [easing] , [fn]]) ~~~ 4.渐进方式调整到指定的不透明度 ~~~ fadeTo ( [ [speed] , opacity,[easing] , [fn]])//速度 和 透明度 必须写 ~~~ .效果参数 ( 1 )opacity透明度必须写,取值0~1之间。 (2 )speed:三种预定速度之一的字符串( "slow" ，"normal" ,or "fast" )或表示动画时长的毫秒数值(如: 1000)。必须写 (3 ) easing : (Optiona)用来指定切换效果,默认是"swing” , 可用参数"linear' ### 淡入弹出效果参数 (1）参数都可以省略。 ( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如∶1000)。 ( 3 ) easing :(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。 ( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。 ### 淡入淡出演示实验 |  |  | | --- | --- | |  |  | 上面代码优化 ## 3.6自定义动画animate 1.语法 ~~~ animate(params , [ speed] , [easing] ,[fn] ) ~~~  ### 2.参数 ( 1 )params:.想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。 ( 2 ) speed :三种预定速度之一的字符串(“slow”，"normal”, or“fast”)或表示动画时长的毫秒数值(如∶1000)。 ( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。 ( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。 # 案例:王者荣耀手风琴效果 （折叠卡片）    ## 案例分析 ~~~ ①鼠标经过某个小i有两步操作: ②当前小li 宽度变为224px，同时里面的小图片淡出,大图片淡入 ③其余兄弟小i宽度变为69px,小图片淡入,大图片淡出 ~~~ ## 代码实验 html  css  js