微信扫一扫打赏支持

js进阶 13-1 jquery动画中的显示隐藏函数有哪些

js进阶 13-1 jquery动画中的显示隐藏函数有哪些

一、总结

一句话总结：show()，hide()，toggle()，这三个。

 

1、jquery动画中显示隐藏效果函数有哪些？

show()
hide()
toggle()

 

2、显示隐藏效果三个函数中参数中的函数参数怎么使用？

其实是动画完成执行的函数

语法：$(selector).show([speed,[easing],[fn]])

fn:在动画完成执行的函数，每个元素执行一次。



29             $('div').hide(500,function(){
30                 alert('动画结束')
31             })


 


3、$(selector).show([speed,[easing],[fn]])这句话中的三个参数的执行情况是怎么样的？


a、如果没有参数，那就是没有参数


b、如果有参数，第一个参数必须是speed


c、speed的后两个参数easing和fn的地位是一样的，如果同时出现，easing在前fn在后，如果不同时出现，当后两个参数只出现fn的时候，fn前面不需要加东西


29             $('div').hide(500,function(){
30                 alert('动画结束')
31             })


 


 


 


二、jquery动画中的显示隐藏函数有哪些


1、相关知识


显示和隐藏




控制元素的的显示和隐藏是最基本的动画技术。


    

  • show()显示被选的元素

    语法：$(selector).show([speed,[easing],[fn]])
    

    • 

  • hide()隐藏被选的元素

    语法：$(selector).hide([speed,[easing],[fn]])
    

    • 

  • toggle()对被选元素进行隐藏和显示的切换

    语法：$(selector).toggle(speed,callback,switch
    

    • 

  • 参数说明：
    

    1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值（如：1000
    

    2.	easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"
    

    3.	fn:在动画完成执行的函数，每个元素执行一次。
    


    • 







 


 


2、代码




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10     div{width: 150px;height: 150px;border: 1px solid green;display: none;}
11       </style>
12 </style>
13 </head>
14 <body>
15 <div id="div1"></div><div id="div2"></div><div id="div3"></div>
16 <input id="btn1" type="button" value="显示">
17 <input id="btn2" type="button" value="隐藏">
18 <input id="btn3" type="button" value="切换">
19 </body>
20 <script>
21     $(function(){
22         $('#btn1').click(function(){
23             //"speed参数:normal(=400),fast(=200),slow(=600)。
24             $('#div1').show('slow')
25             $('#div2').show(1000)
26             $('#div3').show('fast')
27         })
28         $('#btn2').click(function(){
29             $('div').hide(500,function(){
30                 alert('动画结束')
31             })
32         })
33         $('#btn3').click(function(){
34             $('div').toggle(1000)
35         })
36 
37     })
38 </script>
39 </html>




 


 


 







		

		
posted @ 
2018-07-13 13:48 
范仁义 
阅读(443) 
评论(0) 
 
收藏 
举报