Foros del Web - Ver Mensaje Individual

hinfra · #1 (**permalink**) 10/03/2010, 21:13

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$(document).ready(inicio);
        
 
                
        function inicio(){
            $("#boton1,#boton2,#boton3,#boton4,#boton5,#boton6").hover(funcion1,funcion2);
        }
        
        function funcion1(){
            $(this).animate(
            {height:"+=50px"},
            500
            );
            
            $(this).css("background-color","eee");
        }
        
        function funcion2(){
            $(this).css("background-color","ccc");
            
            $(this).animate(
            {height:"-=50px"},
            500
            );
        }

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

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    <script src="js/jquery-1.4.2.min.js"></script>
    
    <script src="js/functions.js"></script>
    
    
    <body>
        <div id="contenedor">
            <div id="boton1">Boton1</div>
            <div id="boton2">Boton2</div>
            <div id="boton3">Boton2</div>
            <div id="boton4">Boton2</div>
            <div id="boton5">Boton2</div>
            <div id="boton6">Boton2</div>
        </div>
        
    </body>
</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!