Ejecutar varias funciones jquery en un mismo boton o enlace

Comercial · #1 (**permalink**) 17/06/2011, 07:42

Hola,

A ver si alguien podría resolverme esta pequeña duda. Ahora mismo tengo un div que usa la funcion animate() para subir o bajar, todo me va perfectamente pero ¿cómo podría hacer la función de subir/bajar en un solo botón en vez de en dos? ¿es posible?

Esa es mi duda y aquí dejo el código con el que estoy trabajando.

Código HTML:

<html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bajar").click(function(){
    $(".captura").animate({height:500},"slow");
  });
});
$(document).ready(function(){
  $("#subir").click(function(){
    $(".captura").animate({height:150},"slow");
  });
});
</script> 
</head>
<body>
<span id="bajar">Bajar</span> | <span id="subir">Subir</span>
<br />
<div class="captura" style="height:150px;width:200px;position:relative;border: 5px solid #afafaf; background:#c1c1c1">
</body>
</html>

Muchas gracias! (y siento si el título del post no es el adecuado para la pregunta)

Naahuel · #2 (**permalink**) 17/06/2011, 10:33

Usá .toggle() :)

Código HTML:

Ver original<html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#subirbajar").toggle(function(){
    $(".captura").stop().animate({height:500},"slow"); 
  }, function(){ 
    $(".captura").stop().animate({height:150},"slow");
  });
});
</script> 
</head>
<body>
  <span id="subirbajar">Bajar / Subir</span>
<br />
<div class="captura" style="height:150px;width:200px;position:relative;border: 5px solid #afafaf; background:#c1c1c1">
</body>
</html>

Notá que también agregué .stop() a la animación. Eso es importante porque si yo clickeo varias veces las animaciones se ejecutarán en orden cuantas veces yo haya clickeado, pero con .stop() la animación que se estaba ejecutando anteriormente se detiene.

Comercial · #3 (**permalink**) 17/06/2011, 10:43

Hola Naahuel, nuevamente gracias por todo, es lo que necesito :)... yo ya me estaba liando en algunas webs leyendo sobre if else y puff, lío.

Un saludo! :)

Comercial · #4 (**permalink**) 17/06/2011, 15:50

Estoy de nuevo por aquí... a ver si puedo resolver lo siguiente... ya tengo los dos botones unificados en uno para poder hacer click en el mismo.

Ahora mi pregunta sería, ¿como podría dar una hoja de estilo diferente a cada estado?

Si no han expandido la ventana pues con css añadir una imagen tipo (+) y cuando hayan hecho click pues que aparezca otra imagen (-).

Muchas gracias por la ayuda :)

Naahuel · #5 (**permalink**) 17/06/2011, 15:56

Podés usar clases y alternarlas con .toggleClass()

Código HTML:

Ver original<html>
<html>
<head>
<style>
  .captura{background:yellow;} 
  .azul{background:blue;}  
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#subirbajar").toggle(function(){
    $(".captura").stop().animate({height:500},"slow").toggleClass('azul'); 
  }, function(){ 
    $(".captura").stop().animate({height:150},"slow").toggleClass('azul');
  });
});
</script> 
</head>
<body>
  <span id="subirbajar">Bajar / Subir</span>
<br />
<div class="captura" style="height:150px;width:200px;position:relative;border: 5px solid #afafaf;">
</body>
</html>

Naahuel · #6 (**permalink**) 17/06/2011, 16:04

Ups, entendí mal. Esto es lo que querías?

Código HTML:

Ver original<html>
<html>
<head>
<style>
  .cerrado:after{
    content:'  (+)';
  }
  .expandido:after{
    content: '  (-)';
  }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#subirbajar").toggle(function(){
    $(this).removeClass('cerrado').addClass('expandido');
    $(".captura").stop().animate({height:500},"slow");
  }, function(){ 
    $(this).removeClass('expandido').addClass('cerrado');
    $(".captura").stop().animate({height:150},"slow");
  });
});
</script> 
</head>
<body>
  <span id="subirbajar" class="cerrado">Bajar / Subir</span>
<br />
<div class="captura" style="height:150px;width:200px;position:relative;border: 5px solid #afafaf; background:#c1c1c1">
</body>
</html>

Claro que estoy usando :after en CSS sólo para que lo veas, pero si lo querés hacer más compatibles con navegadores viejos podés usar imágenes de fondo:

Código CSS:

Ver original.cerrado{
    background:url(imagen-con-mas.jpg);
  }
  .expandido{
    background:url(imagen-con-menos.jpg);
  }

Comercial · #7 (**permalink**) 18/06/2011, 07:20

Gracias, era lo que necesitaba :)

Ahora solo tengo que pelearme con el CSS

Gracias otra vez Naahuel