Tema: animate() de Jquery
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/03/2010, 21:13
hinfra
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 16 años, 1 mes
Puntos: 1
animate() de Jquery
Saludos,

He realizado mi primera animación en jQuery.

Este es el código que he programado, y lo tengo en el archivo "functions.js" (por si miráis el HTML):

Código Javascript: 
Ver original
  1. $(document).ready(inicio);
  2.         
  3.  
  4.                 
  5.         function inicio(){
  6.             $("#boton1,#boton2,#boton3,#boton4,#boton5,#boton6").hover(funcion1,funcion2);
  7.         }
  8.         
  9.         function funcion1(){
  10.             $(this).animate(
  11.             {height:"+=50px"},
  12.             500
  13.             );
  14.             
  15.             $(this).css("background-color","eee");
  16.         }
  17.         
  18.         function funcion2(){
  19.             $(this).css("background-color","ccc");
  20.             
  21.             $(this).animate(
  22.             {height:"-=50px"},
  23.             500
  24.             );
  25.         }

Y la página HTML, por si queréis echarle un ojo:

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <title>New Web Project</title>
  5.     </head>
  6.     
  7.     <link href="css/style.css" rel="stylesheet" type="text/css" />
  8.     
  9.     <script src="js/jquery-1.4.2.min.js"></script>
  10.     
  11.     <script src="js/functions.js"></script>
  12.     
  13.     
  14.     <body>
  15.         <div id="contenedor">
  16.             <div id="boton1">Boton1</div>
  17.             <div id="boton2">Boton2</div>
  18.             <div id="boton3">Boton2</div>
  19.             <div id="boton4">Boton2</div>
  20.             <div id="boton5">Boton2</div>
  21.             <div id="boton6">Boton2</div>
  22.         </div>
  23.         
  24.     </body>
  25. </html>

Paso a paso...

Lo que hago es que cuando la página esté cargada cargue la función inicio.

Esta función "inicio" es un .hover que aplico a los 6 botones de la página.

La "funcion1" se aplica cuando el ratón está sobre un botón y la "función2" cuando el ratón ya no está encima.

Hasta aquí todo bien.

El problema es que los DIV me hacia abajo, y yo lo que quiero es que crezcan hacia arriba.

¿Alguna solución?

PD: Agradecería críticas hacia el código también, ya que al estar empezando no me gustaría pillar malas prácticas.

¡Muchas gracias!