Animaciones sencillas con jQuery

Muchos utilizan jQuery y para ellos, New2WP muestra una forma simple de crear efectos de distino tipo; este, en particular, permite deslizar imagenes de tal modo que superponemos dos y cuando ponemos el cursor encima, se muestra la otra; es decir un efecto hover pero animado:

El script en si mismo es corto, agregamos jQuery antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Y debajo, la función:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('.animar').hover(function() {
    $(this).children('.front').stop().animate({ "top" : "150px"}, 700);
  }, function() {
    $(this).children('.front').stop().animate({ "top" : "0px"}, 200);
  });
});
//]]>
</script>

Por último, un poco de CSS:

<stye>
.animar {
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 200px;
}
.animar img {
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
</stye>

Lo usaremos de este modo:

<div class="animar">
  <img src="URL_SEGUNDA_IMAGEN" />
  <img src="URL_PRIMERA_IMAGEN" class="front" />
</div>

Todo lo que debemos hacer es colocar dos imágenes dentro de un DIV con la clase animar y adentro, dos imágenes; la segunda de ellas tendrá la clase front y es la que se verá por defecto; como están posicionadas de forma absoluta, están superpuestas y la segunda, tapa la primera.

El tamaño de las imágenes del ejemplo es de 200x150 y el script buscará la imagen con la clase front y cambiará el valor de la propiedad top de tal forma que se "mueva" hacia abajo tanto como el alto de la imagen misma y de esa forma, se verá la otra que está debajo animando ese desplazamiento con una cierta velocidad (700 en este caso):

$(this).children('.front').stop().animate({ "top" : "150px"}, 700); // baja 150 pixeles

Al sacar el cursor de encima se restaura la posición a cero pero más rápidamente (200):

$(this).children('.front').stop().animate({ "top" : "0px"}, 200);

Lo mismo puede hacerse en cualquier dirección; esto desplaza la imagen hacia arriba:

$(this).children('.front').stop().animate({ "top" : "-150px"}, 700);  // sube 150 pixeles

Y estas dos, desplazarían la imagen horizontalmente ya que en lugar de top, usamos left:

// hacia la derecha:
$(this).children('.front').stop().animate({ "left" : "200px"}, 700);  // se mueve 200 pixeles a la derecha (valores positivos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

// hacia la izquierda:
$(this).children('.front').stop().animate({ "left" : "-200px"}, 700);  // se mueve 200 pixeles a la izquierda (valores negativos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });