animate() de Jquery

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!

Dany_s · #2 (**permalink**) 11/03/2010, 06:07

En realidad no es que el div crece para arriba o para abajo, lo que hace es cambiar el tamaño, para lograrla apariencia que buscas podes colocar un div que sea el botón abajo del div que crece.

El código está bien pero si usas animate sólo para cambiar el tamaño del div podés usar slideDown y slideUp
esto
$("#boton1,#boton2,#boton3,#boton4,#boton5,#boton6 ")
podés cambiar por
$(#contenedor>div)
imaginate si ya no queres que se llamen botonN sino botoncitoN tendrías que cambiar en cada uno de los selectores en jquery jeje que se yo si por ahi se da esa posibilidad

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $(document).ready( function (){
        $(".cont").slideUp(0);
            $(".boton").click( function () {
                $('.activo').removeClass('activo').slideUp(500);
                $(this).parent().find('.cont').addClass('activo').slideDown(500);
            });
    });
  </script>
  <style>
      .boton{background-color:red; }
      .cont{background-color:blue; }
  </style>
</head>
<body>
    <div id="contenedor">
 
        <div class="bloque">
            <div class="cont">11111<br />1111111<br />111111</div>
            <div class="boton">Boton1</div>
        </div>
 
        <div class="bloque">
            <div class="cont">22222<br />222222<br />222222</div>
            <div class="boton">Boton2</div>
        </div>
 
        <div class="bloque">
            <div class="cont">333333<br />333333<br />33333</div>
            <div class="boton">Boton3</div>
        </div>
 
        <div class="bloque">
            <div class="cont">4444444<br />444444<br />44444</div>
            <div class="boton">Boton4</div>
        </div>
 
        <div class="bloque">
            <div class="cont">5555<br />55555<br />5555555</div>
            <div class="boton">Boton5</div>
        </div>
 
        <div class="bloque">
            <div class="cont">6666666<br />666666<br />66666666</div>
            <div class="boton">Boton6</div>
        </div>
 
    </div>
</body>
</html>

lo que hago es

primero cierro los div con clase cont
$(".cont").slideUp(0);

uso un evento click en los div con clase boton

busco div que tenga clase 'activo', elimino la clase 'activo' y lo cierro
$('.activo').removeClass('activo').slideUp(500);

del boton que se hizo click voy al padre y busco el div con clase 'cont' y le agrego la clase 'activo', por último lo abro
$(this).parent().find('.cont').addClass('activo'). slideDown(500);

y listo

hinfra · #3 (**permalink**) 11/03/2010, 08:59

Muchas gracias Dany_s, siempre estás por aquí para resolver mis dudas. Muchas gracias, de veras.

El ejemplo que tu me propones: http://www.hectorgarrofe.com/jquery/animate.html

La verdad es que el tuyo tiene un código muy limpio, pero mi duda creo que es todavía más sencilla de responder. Fíjate bien en mi ejemplo: http://www.hectorgarrofe.com/jquery/index.html

Yo quiero que hagan exactamente lo mismo. Pero que cuando crezca el DIV, lo haga hacia arriba, no hacia abajo como en mi ejemplo. SOLO ESO.

Adjunto el css por si la moscas...

Código CSS:

Ver originalbody{
text-align:center;
}
 
#contenedor{
margin: auto;
margin-top: 100px;
width: 900px;
text-align:left;
}
 
#boton1{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float: left;
cursor: pointer;
}
 
#boton2{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
}
 
#boton3{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
}
 
#boton4{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
}
 
#boton5{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
}
 
#boton6{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
}