Añadir clases a un elemento con .delay de jquery
Últimamente he tenido que trabajar bastante con formularios que precisaban mostrar y ocultar información, añadir pequeñas animaciones hace el proceso más agradable sobre todo si se trata de formularios más o menos grandes.
En principio el objetivo era animar diferentes elementos (aparecer, desaparecer, mover, …) al hacer click en algún botón o link. Debido a mi escasa experiencia con jQuery y con animaciones con Css lo que me ha resultado más efectivo es concatenar las animaciones con jQuery con .delay, añadiendo o eliminando clases al elemento a animar, el resto es simple, ir creando las clases para cada estado del elemento, separando con .delay cada una de las animaciones que se ejecutan con CSS. Os dejo un ejemplo simple de como funciona.
Hay que tener en cuenta que la duración de la animación no debe superar el tiempo de arranque de la siguiente animación.
En el ejemplo, el texto del botón pasa de color negro a rojo, luego se le aplica una opacidad, cambia el color del texto a azul y vuelve a su estado original.
Esta técnica nos permite aplicar la misma técnica a diferentes elementos de la web con el mismo id o class.