JQuery 隐藏和显示
Posted 笑傲江湖未平生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 隐藏和显示相关的知识，希望对你有一定的参考价值。
给<p></p>添加点击事件，如果点击$(this).hide()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="jquery-3.2.1.min.js"> 5 </script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $("p").click( 9 function(){ 10 $(this).hide(); 11 }); 12 }); 13 </script> 14 </head> 15 16 <body> 17 <p>点击会消失</p> 18 <p>点击会消失</p> 19 </body> 20 </html>
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(selector).hide(speed,callback); $(selector).show(speed,callback);
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="jquery-3.2.1.min.js"> 5 </script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $("button").click(function(){ 9 $("p").toggle(); 10 }); 11 }); 12 </script> 13 </head> 14 15 <body> 16 <p>点击会消失</p> 17 <p>点击会消失</p> 18 <button type="button">切换</button> 19 </body> 20 </html>
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn(4000); $("#div3").fadeIn("slow"); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeIn() 方法。</p> <button>点击这里，使三个矩形淡入</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div> <br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html>
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
以上是关于JQuery 隐藏和显示的主要内容，如果未能解决你的问题，请参考以下文章