2.hide()让元素隐藏
元素显隐效果有3个可选参数:
1.速度 : 慢速"slow", 正常"normal", 快速"fast",毫秒数
2.切换效果:意义不大 默认 摆动"swing"，直线"linear"
3.动画完成时执行的函数
hide( )让元素隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #btn{width: 200px;height: 40px;} img{ /*display: none;*/ } </style> <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //元素显隐效果有3个可选参数: //1.速度 : 慢速"slow", 正常"normal", 快速"fast",毫秒数 //2.切换效果:意义不大 默认 摆动"swing"，直线"linear" //3.动画完成时执行的函数 $("#btn").click(function(){ //2.hide()让元素隐藏 //$("#sun").css("display","none");传统方法，让元素隐藏 //$("#sun").hide(); $("#sun").hide(2000);//让元素2秒内渐渐隐藏 // $("#sun").hide(2000,function(){ // alert("我隐藏了"); // }); }); }) </script> </head> <body> <button id="btn">按钮</button> <br /><br /> <img src="img/sun.jpg" width="500" id="sun"/> </body> </html>
让元素2秒内渐渐隐藏直至消失
toggle( )：元素显示隐藏自动切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #btn{width: 200px;height: 40px;} img{ /*display: none;*/ } </style> <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ 传统方法:元素显示隐藏自动切换（点击一下按钮隐藏，再点击一下按钮显示，轮回切换效果） // var v = $("#sun").css("display");//获取display属性值 // if (v=="none") { // $("#sun").show(); // } else{ // $("#sun").hide(); // }; ------------------------------------------------------------- toggle()方法元素显示隐藏自动切换（点击一下按钮隐藏，再点击一下按钮显示，轮回切换效果） //$("#sun").toggle(); //$("#sun").toggle(2000); $("#sun").toggle(2000,function(){----2秒内显示或隐藏 alert("我会自动切换显示隐藏"); }); }); }) </script> </head> <body> <button id="btn">按钮</button> <br /><br /> <img src="img/sun.jpg" width="500" id="sun"/> </body> </html>
