Una cosa que podemos hacer de forma muy sencilla con jQuery es ejecutar animaciones de elementos. Y es que jQuery nos proporciona una función para animar elementos. Esta función es .animate().
Pero vamos por pasos. Lo primero será insertar el elemento que queremos animar. Por ejemplo, una imagen. Así que colocamos la imagen en la página.
Lo siguiente será decidir en qué momento queremos realizar la animación. En nuestro caso la secuencia será la siguiente. Cuando pasemos el ratón sobre la imagen agrandaremos dicha imagen. Y cuando salgamos de la imagen con el ratón, devolveremos la imagen al tamaño original.
Así que vamos a utilizar la gestión de eventos que nos proporcionan los métodos .mouseover() y .mouseout(). Será desde estos eventos dónde lancemos la animación.
$(document).ready(function(){
$("#logo").mouseover(function(){...});
$("#logo").mouseout(function(){...});
});
Vemos que los métodos se lanzan sobre el elemento al que hemos dado el id «logo».
Ahora ya pasamos a realizar la animación de la imagen. Y como habíamos comentado al principio del artículo utilizaremos el método .animate().
El método .animate() recibe como parámetros diferentes de cosas. Pero el primer parámetro, que es el más importante, recoge las propiedades que queremos modificar en el elemento para la animación. Pero vemos el resto.
.animate( properties [, duration] [, easing] [, complete] )
Vemos que además de los parámetros CSS a modificar podemos establecer: la duración, que indica en milisegundos cuánto tiempo durará la animación. La función que podemos ejecutar durante la animación es la que se referencia en el parámetro easing y con el parámetro complete podemos indicar qué función queremos ejecutar al finalizar la animación.
Pero volviendo a nuestro ejemplo, lo haremos de la forma más sencilla. Es decir, solo modificando las propiedades de la imagen. Como indicamos que al entrar con el ratón sobre la imagen la haríamos más grande, lo que vamos a realizar es incrementar su tamaño, es decir, su atributo height. Y justamente lo contrario cuando salgamos de la imagen.
Así nuestro código jQuery quedará de la siguiente forma:
$(document).ready(function(){
$("#logo").mouseover(function(){
$(this).animate({height:'150px'});
});
$("#logo").mouseout(function(){
$(this).animate({height:'50px'});
});
});
Puedes probar el resto de propiedades del método animate, por ejemplo, si queremos hacer más lento cuando la imagen se haga grande.
$("#logo").mouseover(function(){
$(this).animate({height:'150px'},2000);
});
¿Qué se te ocurre hacer con la función .animate() de jQuery?
