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>