jQuery有三种方式显示与隐藏元素
1、默认显示和隐藏的方式
1、show([speed],[easing],[fn]):显示
2、hide([speed],[easing],[fn]):隐藏
3、toggle([speed],[easing],[fn]):切换
2、滑动显示和隐藏
1、slideDown([speed],[easing],[fn]):向下滑动显示
2、slideUp([speed,[easing],[fn]]):向上滑动隐藏
3、slideToggle([speed],[easing],[fn]):切换
3、淡入淡出显示和隐藏
1、fadeIn([speed,[easing],[fn]]):显示
2、fadeOut([speed,[easing],[fn]]):隐藏
3、fadeToggle([speed,[easing],[fn]]):切换
[speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次
案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script> <script> function hideFn() { $("#showDiv").fadeOut(2000,"swing",function () { alert("我完全隐藏了") }) } function showFn() { $("#showDiv").show("slow","swing",function () { alert("我显示出来了") }) } function toggleFn() { $("#showDiv").toggle() } </script> </head> <body> <input type="button" value="点击按钮隐藏div" οnclick="hideFn()"> <input type="button" value="点击按钮显示div" οnclick="showFn()"> <input type="button" value="点击按钮切换div显示和隐藏" οnclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:pink"> div显示和隐藏 </div> </body> </html>