js进阶 13-2 jquery动画滑动效果哪些注意事项
一、总结
一句话总结：滑动里面这里up是隐藏，down是显示。
1、jquery动画默认的两个切换效果是什么（swing默认和linear的区别是什么）？
swing默认和linear，和css里面默认的效果相比少一点
linear，是匀速运动
swing是先慢后快
2、jquery动画如果想使用更多的切换效果，需要怎么办？
需要用插件
3、滑动效果的三个函数和显示隐藏的三个函数有什么异同？
都是三个，参数都是一样，这里是up，down，toggle
这里up是隐藏，down是显示
二、jquery动画滑动效果哪些注意事项
1、滑动
滑动效果也是比较常见的动画效果，比如我们常见的具有滑动效果的下拉菜单
- slideDown()：通过调整高度来滑动显示被选元素
语法：$(selector).slideDown([speed],[easing],[fn])
- slideUp()：通过调整高度来滑动隐藏被选元素
语法：$(selector),slideUp[speed,[easing],[fn]])
- slideToggle()通过高度变化来切换所有匹配元素的可见性。
语法：$(selector).slideToggle([speed],[easing],[fn])
- 参数说明：
1.speed:三种预定速度之一的字符串（"slow","normal",or"fast")或表示动画时长的毫秒数值（如：1000）
2. easing:(Optional)用来指定切换效果， 默认是"swing",可用参数"linear""
3. fn:在动画完成时执行的函数，每个元素执行一次。
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 7 <style type="text/css"> 8 input{width: 100px;height: 30px;} 9 #div1,#div2,#div3{width: 150px;height: 150px;border:1px solid green;margin-left: 15px;display: inline-block;} 10 </style> 11 </head> 12 <body> 13 <h3>jQuery动画效果</h3> 14 <input id="btn1" type="button" value="slideDown"> 15 <input id="btn2" type="button" value="slideUp"> 16 <input id="btn3" type="button" value="slideToggle"><br><br> 17 <div id="div1"></div><div id="div2"></div><div id="div3"></div> 18 <script> 19 // $('#btn3').click(function(){ 20 // $('#div1').toggle(5000,'linear') 21 // $('#div2').toggle(5000,'swing') 22 // $('#div3').toggle(5000) 23 // }) 24 $('#btn1').click(function(){ 25 $('#div1').slideDown(1000) 26 $('#div2').slideDown(2000) 27 $('#div3').slideDown(3000) 28 }) 29 $('#btn2').click(function(){ 30 $('div').slideUp() 31 }) 32 $('#btn3').click(function(){ 33 $('div').slideToggle() 34 }) 35 </script> 36 </body> 37 </html>