El método show() en jQuery se usa para mostrar los elementos ocultos y seleccionados.
Nota: Este método muestra los elementos ocultos que utilizan CSS display: none propiedad. No son visibles los elementos cuya visibilidad está oculta.
Sintaxis:
$(selector).show( speed, easing, callback )
Parámetros: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- Velocidad: es un parámetro opcional y se usa para especificar la velocidad del efecto de desvanecimiento. El valor predeterminado de velocidad es 400 milisegundos. Los posibles valores de la velocidad son:
- milisegundos
- «lento»
- «rápido»
- Easing: es un parámetro opcional y se usa para especificar la velocidad del elemento en diferentes puntos de la animación. El valor predeterminado de aceleración es «swing». Los posibles valores de la aceleración son:
- «ritmo»
- «lineal»
- devolución de llamada: es un parámetro opcional. La función de devolución de llamada se ejecuta después de que se completa el método show().
Los siguientes ejemplos ilustran el método show() en jQuery:
Ejemplo 1: Este ejemplo muestra la pantalla: ninguno de los contenidos con la velocidad dada.
<!DOCTYPE html> <html> <head> <title> jQuery Effect show() Method </title> <style> #Outer { border: 1px solid black; padding-top: 40px; height: 140px; background: green; display: none; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <div id= "Outer"> <h1 style = "color:white;" > GeeksForGeeks </h1> </div><br> <button id = "btn"> Show </button> <!-- Script to show display:none content --> <script> $(document).ready(function() { $("#btn").click(function() { $("#Outer").show(1000); }); }); </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: Este ejemplo muestra la pantalla: ninguno contenido con valor de aceleración de swing.
<!DOCTYPE html> <html> <head> <title> jQuery Effect show() Method </title> <style> #Outer { border: 1px solid black; padding-top: 40px; height: 140px; background: green; display: none; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <div id= "Outer"> <h1 style = "color:white;" > GeeksForGeeks </h1> </div><br> <button id = "btn"> Show </button> <!-- Script to show display: none content with swing easing --> <script> $(document).ready(function() { $("#btn").click(function() { $("#Outer").show("swing"); }); }); </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA