.animate() de JQuery – Muévete, no te oxides

Engranajes oxidados - artículo .animate() JQuery

Muévete, no te oxides.

En esta ocasión voy a explicar un poco por encima la función .animate() de JQuery.

JQuery, que como siempre nos simplifica mucho las tareas, y nos invita a darle vida a nuestra web con varias de sus funciones, nos ha regalado la reina de las funciones de animación en Javascript, .animate(), la reina indiscutible, ya que nos permite animar cualquier propiedad CSS a través de Javascript, y de una forma tan sencilla, que casi asusta.

Cierto es que CSS también permite animaciones directas, sin intermediarios, y que al hacerlo directamente, las animaciones CSS en ocasiones son más suaves que las generadas por scripts. Pero de eso ya hablaremos otro día, ahora no es lo que toca.

Y es que podemos hacer animaciones sencillas, y anidar unas animaciones con otras hasta complicarlo todo lo que queramos. Pero siempre facilito facilito…

Veamos una animación sencilla.

$( "#nombre_div" ).animate( { left: "+=30px" }, "slow" );

Click encima del coche para ejecutar la animación.

Coche lateral

Tan fácil como eso, al objeto que queremos mover -> $(“#nombre_div”),
le aplicamos la función -> .animate(),
y dentro de sus paréntesis los parámetros de la animación, que en este caso son la propiedad CSS -> left,
el valor al que tiene que llegar -> +=30px (30 píxeles más de la cantidad que tenga la propiedad left),
y por último -> slow, que indica la velocidad a la que tiene que hacer la animación. Se puede indicar “fast” (rápido) o “slow” (lento), o indicar el tiempo en milisegundos, “800” equivale a 0.8 segundos.

Podemos también anidar animaciones para que se ejecuten de forma consecutiva, así:

$( "#nombre_div" ).animate( { left: "+=150px", top: "-=150px" }, 1500, function(){
    $( "#nombre_div" ).animate( { left: "-=150px", top: "+=150px" }, 3500 );
});

Click encima del coche para ejecutar la animación.

Ferrari orientado pq

En este ejemplo tan sencillo podemos comprobar la potencia que tiene la función .animate().

En su primer parámetro, el que indica la propiedad o atributo CSS y la cantidad, nos permite poner un array (de ahí las llaves {}), y de esa forma podemos poner varias propiedades con sus distintos valores, y aplicará esas transformaciones simultáneamente. Es así como he desplazado el coche en diagonal, moviendo a la derecha y arriba simultáneamente, y en la segunda animación, abajo y a la izquierda.

En su segundo parámetro, igual que antes, el tiempo que dura la animación en milisegundos.

Y en su tercer parámetro, nos permite añadir una función que se ejecutará cuando finalice la animación. Esto tiene una potencia increíble, ya que al tratarse de una función, puedes hacer lo que quieras, tan complicado y enrevesado como te apetezca. Por ejemplo, puedes mostrar un DIV con un mensaje diciendo que la animación ha acabado, algo como (“Su coche ya está estacionado, gracias, y hasta pronto”). Pero yo he usado esa función para crear otra animación que devuelva el coche a su lugar de origen. Es más, podemos usar ese tercer parámetro en esa segunda animación, para incluir una función al finalizar esta, así cuando el coche llegue a su lugar de origen, podría hacer otra animación, como desvanecer, cambiar de color o lo que se nos ocurra. Incluso podemos invocar acciones a otros elementos, así cuando este coche regrese a su origen, podríamos mover otro que hubiera a su lado. Hasta podríamos llamar de nuevo a la primera animación para crear un bucle infinito, o controlar por código cuantas veces se ha movido el coche y parar la animación cuando lo haya hecho un número determinado de veces.

Mejor te lo muestro.

Coche naranja
Coche verde
Coche rojo
Coche azul
Coche rosa
Coche amarillo

– El coche naranja, arrastra al coche verde hacia abajo cuando ha acabado su movimiento, pero no hacia arriba.

– El coche verde es totalmente independiente.

– El coche rojo arrastra al coche amarillo hacia abajo a su mismo tiempo, pero no hacia arriba.

– El coche azul se desplaza en dos movimientos, tanto hacia arriba como hacia abajo.

– El coche rosa muestra un aviso diferente al subir y al bajar.

– El coche amarillo arrastra al coche rojo hacia arriba a su mismo tiempo, pero no hacia abajo.

Aquí el código, estas son las funciones que tienes que asociar al evento “click” si lo haces en JQuery o al evento “onclick” en Javascript.

 

function mover_coche_naranja_vertical() {
	if ( $( '#coche_naranja_vertical' ).css( 'top' ) == "10px" ) {
		$( "#coche_naranja_vertical" ).animate( { top: "180px" }, 1500, function() {
			if ( $( '#coche_verde_vertical' ).css( 'top' ) == "10px" ) {
				$( "#coche_verde_vertical" ).animate( { top: "180px" }, 1500 );
			}
		});
	} else if ( $( '#coche_naranja_vertical' ).css( 'top' ) == "180px" ) {
		$( "#coche_naranja_vertical" ).animate( { top: "10px" }, 1500 );
	}
}

function mover_coche_verde_vertical() {
	if ( $( '#coche_verde_vertical' ).css( 'top' ) == "10px" ) {
		$( "#coche_verde_vertical" ).animate( { top: "180px" }, 1500 );
	} else if ( $( '#coche_verde_vertical' ).css( 'top' ) == "180px" ) {
		$( "#coche_verde_vertical" ).animate( { top: "10px" }, 1500 );
	}
}

function mover_coche_rojo_vertical() {
	if ( $( '#coche_rojo_vertical' ).css( 'top' ) == "10px" ) {
		$( "#coche_rojo_vertical" ).animate( { top: "180px" }, 1500 );
		if ( $( '#coche_amarillo_vertical' ).css( 'top' ) == "10px" ) {
			$( "#coche_amarillo_vertical" ).animate( { top: "180px" }, 1500 );
		}
	} else if ( $( '#coche_rojo_vertical' ).css( 'top' ) == "180px" ) {
		$( "#coche_rojo_vertical" ).animate( { top: "10px" }, 1500 );
	}
}

function mover_coche_azul_vertical() {
	if ( $( '#coche_azul_vertical' ).css( 'top' ) == "10px" ) {
		$( "#coche_azul_vertical" ).animate( { top: "95px" }, 1000, function() {
			$( "#coche_azul_vertical" ).animate( { top: "180px" }, 1000 );
		});
	} else if ( $( '#coche_azul_vertical' ).css( 'top' ) == "180px" ) {
		$( "#coche_azul_vertical" ).animate( { top: "95px" }, 1000, function() {
			$( "#coche_azul_vertical" ).animate( { top: "10px" }, 1000 );
		});
	}
}

function mover_coche_rosa_vertical() {
	if ( $( '#coche_rosa_vertical' ).css( 'top' ) == "10px" ) {
		$( "#coche_rosa_vertical" ).animate( { top: "180px" }, 2000, function() {
			$( "#aviso_coche_rosa" ).fadeIn( 400 );
			$( "#aviso_coche_rosa" ).html( '<p>Tu precioso coche rosa está bien aparcadito abajo.</p>Click para quitar.' );
		});
	} else if ( $( '#coche_rosa_vertical' ).css( 'top' ) == "180px" ) {
		$( "#coche_rosa_vertical" ).animate( { top: "10px" }, 2000, function() {
			$( "#aviso_coche_rosa" ).fadeIn( 400 );
			$( "#aviso_coche_rosa" ).html( '<p>Ya tienes tu coche rosa otra vez arriba.</p>Click para quitar.' );
		});
	}
}

function mover_coche_amarillo_vertical() {
	if ( $( '#coche_amarillo_vertical' ).css( 'top' ) == "10px" ) {
		$( "#coche_amarillo_vertical" ).animate( { top: "180px" }, 1500 );
	} else if ( $( '#coche_amarillo_vertical' ).css( 'top' ) == "180px" ) {
		$( "#coche_amarillo_vertical" ).animate( { top: "10px" }, 1500 );
		if ( $( '#coche_rojo_vertical' ).css( 'top' ) == "180px" ) {
			$( "#coche_rojo_vertical" ).animate( { top: "10px" }, 1500 );
		}
	}
}

function quitar_aviso_coche_rosa() {
	$( "#aviso_coche_rosa" ).fadeOut( 400 );
}

En esta ocasión en la propiedad “top” he usado valores absolutos “10px” y “180px”, ya que los coches siempre se mueven en esos valores, del píxel 10 al 180 y viceversa. Cierto es que también podía haber usado valores relativos, algo como esto “+=170″ y “-=170″, ya que el desplazamiento entre 10 y 180 es 170.

Ahora puedes darle al botón “MUTE” del canal 2 (el del medio) para apagar y encender el mezclador. No te preocupes, no hay audio, es solo gráfica, pero podríamos ponerle una pista de audio fácilmente. Aunque eso da para otro artículo. :)

Slider_base - artículo .animate() JQuery

Y ahora el código del mezclador.

function encender_slider() {
	$( "#slider_boton" ).animate( { top: "120px" }, 1000 );
	$( "#vu_meter_encendido" ).fadeIn( 1000 );
	$( "#slider_led_encendido" ).fadeIn( 200 );
	$( "#slider_mute_encendido" ).css( 'display' , 'none' );
}

function apagar_slider() {
	$( "#slider_boton" ).animate( { top: "329px" } , 1000 );
	$( "#vu_meter_encendido" ).fadeOut( 1000 );
	$( "#slider_led_encendido" ).fadeOut( 800 );
	$( "#slider_mute_encendido" ).css( 'display' , 'block' );
}

Y con esto creo que ya ha quedado bastante claro el mundo de posibilidades que nos brinda la función .animate(). Recuerda que también podríamos escalar cualquier objeto cambiando los valores “width” (ancho) y “height” (alto), o el “font-size” para texto, o el “line-height” para la separación de líneas de texto… en fin… que solo hemos visto la punta del iceberg.

Iceberg-lechuga - artículo .animate() JQuery
La punta del Iceberg… con lo redondita que es esta lechuga!.

 

Bueno pues, ya sabes, comenta, comparte, pregunta, copy-pastea lo que quieras… y sobretodo… sé feliz. :)

P.D.: Recuerda que el código que he puesto son las funciones, estas se tienen que asociar a algún evento de algún objeto, como por ejemplo el evento “click” de un objeto “botón”.

 

if ( visitante == "amigo" || visitante == "amiga" ) {
    alert( "Un abrazo." );
} else {
    alert( "Un saludo." );
}
Si te ha gustado, lo puedes compartir.

2 thoughts on “.animate() de JQuery – Muévete, no te oxides”

    1. Así es la vida amigo/a, de todas formas, no hago esto para que nadie me de palmaditas en la espalda. Simplemente, cuelgo esta información por que yo he aprendido mucho de otros blogueros. Evidentemente que siempre me apoyo de los manuales y sitios oficiales, pero hay mucha gente que tiene un poder extraordinario, para saber resolver problemas combinando diferentes técnicas. Y eso es una cosa que normalmente en los manuales oficiales no dicen. Así que como me aprovecho del valioso conocimiento de otra gente, creo que lo menos que puedo hacer es aportar algo sin esperar nada a cambio, ya que lo debo a la comunidad. Así vivo más tranquilo.

      De todas formas, tú has comentado, así que te doy las gracias por ello.

      Un saludo.

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>