Animar elementos con jQuery – Html

Animar elementos con jQuery – Html

En estos días me e puesto a trabajar con JQuery y e conseguido agregarle un efecto a una imagen que al pasarle el mouse esta cambie su tamaño. Por eso quiero compartirlos con ustedes, bueno les explicare como hacerlo de una forma rápida y sencilla.

Utilizaremos la función  que jQuery nos proporciona  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 sera lo que yo utilizare. Así que colocamos la imagen en la página.

<img src="contenido.png" alt="logo" id="logo" height="50px"/>

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 en la que estaba.

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-width. 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', width:'150px'});
  });
  $("#logo").mouseout(function(){
     $(this).animate({height:'50px', width:'50px'});
  });
});

Eso es todo, espero que les halla gustado?
¿Y a ti qué se te ocurre hacer con la función .animate() de jQuery?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s