Quizás uno de los aspectos de jQuery es que permite crear animaciones y efectos muy fácilmente: transiciones, movimientos, animaciones… Veámos cómo hacerlo.
El método hide() y el método show() permiten ocultar o mostrar, respectivamente, los elementos representados por el selector. Esto se hace modificando la propiedad display del elemento. Hasta ahora lo hemos usado de una manera muy sencilla. Sin embargo, podemos usarlo de maneras más complejas e interactivas.
"slow" o "fast" o indicar el tiempo en milisegundos como argumento de estos métodos (por ejemplo, $("p").hide(1000) hace desaparecer los párrafos poco a poco, tardando un total de 1 segundo).$("p").hide(1000, miFuncion) hace desaparecer los párrafos poco a poco, tardando un total de 1 segundo y ejecuta miFuncion una vez oculto).Estas animaciones modifican la anchura, altura y opacidad del elemento.
Prueba el siguiente ejemplo. Usa el formulario para cambiar el tiempo que tarda en ocultarse y mostrarse el elemento. Además, puedes ver que hemos usado funciones que se ejecutarán al terminar cada una de las animaciones:
disabled del botón Mostrar para habilitarlo y que lo podamos utilizar.Puedes observar que en este ejemplo hemos utilizado una función arrow (()=>) para definir la función anónima que se ejecutará al terminar las animaciones.
See the Pen Untitled by cfi (@cfi-examples) on CodePen.
El método toggle() permite que un elemento cambie automáticamente de visibilidad entre hide() y show() o viceversa. Usa los mismos parámetros que los anteriores para especificar la velocidad o si queremos que se ejecute una función al terminar.
Prueba a modificar el ejemplo anterior de modo que incluyas un botón que use el toggle para cambiar la visibilidad del párrafo
Estos efectos permiten que un elemento aparezca o desaparezca de forma gradual, modificando la opacidad del elemento.
El método fadeIn Hace que un elemento oculto aparezca. Puede indicarse la velocidad en milisegundos o con los valores "slow" o "fast" y, como en los anteriores, podemos indicar qué función queremos que se ejecute al completar la animación:
El método fadeOut tiene el comportamiento opuesto a de fadeIn y sirve para hacer desaparecer elementos. Acepta los mismos parámetros que los anteriores.
Al igual que en con hide y show, el método fadeToggle permite intercambiar entre los efectos fadeIn y fadeOut. Tiene los mismos parámetros que los anteriores.
Prueba el ejemplo que aparece a continuación. Es similar al de hide y show pero usando los efectos de fading. ¿Ves la diferencia entre uno y otro?
See the Pen fadeIn-fadeOut by cfi (@cfi-examples) on CodePen.
El sliding nos permite mostrar y ocultar elementos haciendo una animación de cambio de altura del elemento.
El método slideDown sirve para mostrar un elemento haciendo una animación de despliegue de arriba hacia abajo. Puede indicarse la velocidad en milisegundos o con los valores "slow" o "fast" y, como en los anteriores, podemos indicar qué función queremos que se ejecute al completar la animación:
Por el contrario, el método slideUp oculta un elemento haciendo una animación de reducción del elemento de abajo hacia arriba. Usa los mismos parámetros que los anteriores.
Al igual que en los anteriores, existe un método slideToggle que alterna entre slideDown y slideUp.
Prueba el ejemplo que aparece a continuación. Es similar a los anteriores pero usando los efectos de sliding. ¿Reconoces las diferencias entre los 3 tipos de métodos para ocultar y mostrar elementos del DOM?
See the Pen Untitled by cfi (@cfi-examples) on CodePen.
Las anteriores animaciones hacían cambios en propiedades muy concretas (anchura, altura, opacidad) hasta terminar cambiando la visibilidad del elemento. Sin embargo, con jQuery podemos crear todo tipo de animaciones personalizadas sobre cualquier propiedad CSS numérica de los elementos del DOM.
Para crear estas animaciones personalizadas usaremos el método animate():
$(selector).animate({propiedadesCSS},velocidad);El primer argumento define las propiedades CSS a modificar. Podemos animar una o varias propiedades a la vez. Estas propiedades están dentro de un objeto (entre llaves {}). Para cada propiedad estableceremos un valor final que queremos alcanzar con la animación. Sin embargo, este valor se puede indicar de dos formas distintas:
width: '100px' entonces el ancho del elemento cambiará hasta alcanzar los 100px.width: '+=100px' entonces el ancho del elemento aumentará en 100px (podemos reducirlo usando -=).El segundo argumento indica la velocidad. Como en anteriores ocasiones, podemos utilizar las cadenas "slow" o "fast" o indicar el tiempo en milisegundos.
Podemos incluir un tercer argumento con la función que queremos que se ejecute al terminar la animación.
A diferencia de los métodos vistos anteriormente en esta sección, estas animaciones no modifican la visibilidad del elemento, por lo que si queremos modificar su visibilidad tendremos que modificar la propiedad CSS display nosotros mismos al acabar la animación.
Por último, tendremos que tener en cuenta que para poder encadenar animaciones que se ejecuten una detrás de otra hay que usar el tercer argumento de función para definir los nuevos pasos de animación.
Prueba el siguiente ejemplo. Observa la diferencia entre cómo hemos definido la animación para que se ejecuten todas a la vez y cómo hemos definido las animaciones encadenadas. El botón Reset sirve para devolver al estado inicial el elemento que estamos animando. Como puedes ver, lo que hacemos es eliminar las propiedades CSS que han sido modificadas. De esta forma, volverá a utilizar los valores de las propiedades definidas en la CSS.
See the Pen Untitled by cfi (@cfi-examples) on CodePen.
Si animas la posición de un elemento usando las propiedades left, right, top o bottom has de tener en cuenta que no siempre el elemento se moverá ya que depende de cómo haya sido establecido su método de posicionamiento. Como puedes ver en el anterior ejemplo, hemos tenido que cambiar la propiedad position: relative del elemento div en la CSS para poder moverlo, ya que su valor por defecto es static y, por tanto, no se movería.