jQuery chaining: Aplicar secuencias de efectos

Vamos a repasar qué son y para qué sirven la secuencia de efectos jQuery chaining.

¿Qué es jQuery chaining?

Podemos decir que son una secuencia de efectos de jQuery que se ejecutan uno tras otro en un mismo elemento del DOM.

Estos efectos van en la misma sintaxis de selector del elemento.

Sintaxis de jQuery chaining

Vayamos con una sintaxis sencilla:

$(selector).efecto1().efecto2().efecto3();

Tal y como podéis ver la sintaxis es fácil de entender, primero definimos el elemento a controlar (selector), después seguido uno de otro los efectos a ejecutarse.

De esta manera nos ahorramos definir varias líneas de código para realizar los mismos efectos, os pongo un ejemplo:

$(selector).efecto1();
$(selector).efecto2();
$(selector).efecto3();

Ejemplo de jQuery chaining

Vamos con el ejemplo de jQuery chaining:

$(document).ready(function(){
 $("#parrafo").hide(4000).show(4000).fadeOut(4000).fadeIn(4000).slideUp(4000).slideDown(4000);
});

Os explico el ejemplo:

• Seleccionamos el elemento con selector id = parrafo.
• Le aplicamos los efectos hide() y show(), fadeOut() y fadeIn(), slideUp y slideDown().
• Todos los efectos tienen una duración de 4 segundos (4000 milisegundos).

Con esta sintaxis nos hemos ahorrado una línea de código por cada efecto ejecutado.

El código HTML del párrafo es el siguiente:

<p id="parrafo">Haz click en cualquier palabra de este párrafo</p>