jQuery.show() 和 jQuery.hide() 之间有什么区别?
jQuery show() 方法
show( speed, [callback] ) 方法使用流畅的动画显示所有匹配的元素,并在完成时触发可选的回调函数。
以下是此方法使用所有参数的描述:
- speed - 一个字符串,表示三个预定义速度之一(“slow”、“normal”或“fast”),或者运行动画的毫秒数(例如 1000)。
- callback - 这是一个可选参数,表示动画完成后要调用的函数。
示例
您可以尝试运行以下代码来学习如何使用 show() 方法。
<html> <head> <title>The jQuery Example</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 100 ); }); $("#hide").click(function () { $(".mydiv").hide( 100 ); }); }); </script> <style> .mydiv { margin:10px; padding:12px; border:2px solid #666; width:100px; height:100px; } </style> </head> <body> <div class = "mydiv"> This is a SQUARE. </div> <input id = "hide" type = "button" value = "Hide" /> <input id = "show" type = "button" value = "Show" /> </body> </html>
jQuery hide() 方法
hide( speed, [callback] ) 方法使用流畅的动画隐藏所有匹配的元素,并在完成时触发可选的回调函数。
以下是此方法使用所有参数的描述:
speed - 一个字符串,表示三个预定义速度之一(“slow”、“normal”或“fast”),或者运行动画的毫秒数(例如 1000)。
callback - 这是一个可选参数,表示动画完成后要调用的函数。
示例
您可以尝试运行以下代码来学习如何使用 hide() 方法。
<html> <head> <title>The jQuery Example</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 200 ); }); $("#hide").click(function () { $(".mydiv").hide( 200 ); }); }); </script> <style> .mydiv { margin:20px; padding:20px; border:4px solid #666; width:100px; height:100px; } </style> </head> <body> <div class = "mydiv"> This is a SQUARE. </div> <input id = "hide" type = "button" value = "Hide" /> <input id = "show" type = "button" value = "Show" /> </body> </html>
广告