微信扫一扫打赏支持

js进阶 13-2 jquery动画滑动效果哪些注意事项

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>

 

 

 

 
posted @ 2018-07-14 20:37  范仁义  阅读(271)  评论(0)  编辑  收藏  举报