jQuery | Efecto show() Método

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *