jQuery - Efectos

jQuery proporciona una interfaz trivialmente simple para realizar varios tipos de efectos sorprendentes. Los métodos jQuery nos permiten aplicar rápidamente los efectos de uso común con una configuración mínima. Este tutorial cubre todos los métodos importantes de jQuery para crear efectos visuales.

Mostrar y ocultar elementos

Los comandos para mostrar y ocultar elementos son más o menos los que esperaríamos: show() para mostrar los elementos en un conjunto envuelto y hide() para esconderlos.

Sintaxis

Aquí está la sintaxis simple para show() método -

[selector].show( speed, [callback] );

Aquí está la descripción de todos los parámetros:

  • speed - Una cadena que representa una de las tres velocidades predefinidas ("lenta", "normal" o "rápida") o el número de milisegundos para ejecutar la animación (por ejemplo, 1000).

  • callback- Este parámetro opcional representa una función que se ejecutará siempre que se complete la animación; se ejecuta una vez para cada elemento animado contra.

A continuación se muestra la sintaxis simple para hide() método -

[selector].hide( speed, [callback] );

Aquí está la descripción de todos los parámetros:

  • speed - Una cadena que representa una de las tres velocidades predefinidas ("lenta", "normal" o "rápida") o el número de milisegundos para ejecutar la animación (por ejemplo, 1000).

  • callback- Este parámetro opcional representa una función que se ejecutará siempre que se complete la animación; se ejecuta una vez para cada elemento animado contra.

Ejemplo

Considere el siguiente archivo HTML con una pequeña codificación JQuery:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </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>

Esto producirá el siguiente resultado:

Alternar los elementos

jQuery proporciona métodos para alternar el estado de visualización de los elementos entre revelados u ocultos. Si el elemento se muestra inicialmente, estará oculto; si está oculto, se mostrará.

Sintaxis

Aquí está la sintaxis simple para uno de los toggle() métodos -

[selector]..toggle([speed][, callback]);

Aquí está la descripción de todos los parámetros:

  • speed - Una cadena que representa una de las tres velocidades predefinidas ("lenta", "normal" o "rápida") o el número de milisegundos para ejecutar la animación (por ejemplo, 1000).

  • callback- Este parámetro opcional representa una función que se ejecutará siempre que se complete la animación; se ejecuta una vez para cada elemento animado contra.

Ejemplo

Podemos animar cualquier elemento, como un <div> simple que contenga una imagen:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Métodos de efectos de JQuery

Has visto el concepto básico de jQuery Effects. La siguiente tabla enumera todos los métodos importantes para crear diferentes tipos de efectos:

No Señor. Métodos y descripción
1 animate (params, [duración, suavizado, devolución de llamada])

Una función para hacer animaciones personalizadas.
2 fadeIn (velocidad, [devolución de llamada])

Desvanezca todos los elementos coincidentes ajustando su opacidad y activando una devolución de llamada opcional después de la finalización.
3 fadeOut (velocidad, [devolución de llamada])

Desvanezca todos los elementos coincidentes ajustando su opacidad a 0, luego establezca la pantalla en "ninguno" y active una devolución de llamada opcional después de la finalización.
4 fadeTo (velocidad, opacidad, devolución de llamada)

Desvanece la opacidad de todos los elementos coincidentes a una opacidad específica y activa una devolución de llamada opcional después de la finalización.
5 esconder( )

Oculta cada uno de los conjuntos de elementos coincidentes si se muestran.
6 ocultar (velocidad, [devolución de llamada])

Oculte todos los elementos coincidentes utilizando una animación elegante y activando una devolución de llamada opcional después de la finalización.
7 show( )

Muestra cada uno de los conjuntos de elementos coincidentes si están ocultos.
8 mostrar (velocidad, [devolución de llamada])

Muestre todos los elementos coincidentes utilizando una animación elegante y activando una devolución de llamada opcional después de la finalización.
9 slideDown (velocidad, [devolución de llamada])

Revele todos los elementos coincidentes ajustando su altura y activando una devolución de llamada opcional después de la finalización.
10 slideToggle (velocidad, [devolución de llamada])

Cambie la visibilidad de todos los elementos coincidentes ajustando su altura y activando una devolución de llamada opcional después de la finalización.
11 slideUp (velocidad, [devolución de llamada])

Oculte todos los elementos coincidentes ajustando su altura y activando una devolución de llamada opcional una vez finalizado.
12 detener ([clearQueue, gotoEnd])

Detiene todas las animaciones que se están ejecutando actualmente en todos los elementos especificados.
13 alternar ()

Alternar la visualización de cada uno de los conjuntos de elementos coincidentes.
14 alternar (velocidad, [devolución de llamada])

Alternar la visualización de cada uno de los conjuntos de elementos coincidentes mediante una animación elegante y activar una devolución de llamada opcional después de la finalización.
15 interruptor de palanca )

Alternar la visualización de cada uno de los conjuntos de elementos coincidentes según el interruptor (verdadero muestra todos los elementos, falso oculta todos los elementos).
dieciséis jQuery.fx.off

Desactive globalmente todas las animaciones.

Efectos basados ​​en la biblioteca de UI

Para usar estos efectos, puede descargar la última biblioteca de interfaz de usuario de jQuery jquery-ui-1.11.4.custom.zipde jQuery UI Library o use Google CDN para usarlo de manera similar a como lo hemos hecho para jQuery.

Hemos utilizado Google CDN para jQuery UI usando el siguiente fragmento de código en la página HTML para que podamos usar jQuery UI:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
No Señor. Métodos y descripción
1 Ciego

Ciega el elemento o lo muestra al cegarlo.
2 Rebotar

Rebota el elemento n veces vertical u horizontalmente.
3 Acortar

Recorta el elemento dentro o fuera, vertical u horizontalmente.
4 soltar

Elimina el elemento o lo muestra al colocarlo.
5 Explotar

Explota el elemento en varias piezas.
6 Doblez

Dobla el elemento como una hoja de papel.
7 Realce

Resalta el fondo con un color definido.
8 Soplo

Las animaciones de escala y desvanecimiento crean el efecto de soplo.
9 Latir

Pulsa la opacidad del elemento varias veces.
10 Escala

Reducir o hacer crecer un elemento en un factor porcentual.
11 Sacudir

Agita el elemento vertical u horizontalmente n veces.
12 Talla

Cambiar el tamaño de un elemento a un ancho y alto específicos.
13 Diapositiva

Desliza el elemento fuera de la ventana gráfica.
14 Transferir

Transfiere el contorno de un elemento a otro.