JQuery animar div desde un botón del div

gitiquitando · #1 (**permalink**) 03/05/2012, 11:29

Buenas tardes,

Llevo intentando un ratito, y no acabo de comprender el porque se limita, es decir :

creo un doctype, script de jquery y creo un formulario con X campos, mi intención es que al cargar la pagina sólo aparezca el buscador básico , pero cuando de al botón avanzado suba el formulario mostrando todos los campos a filtar, además de querer poner opaco el resto del documento.

Con conseguir que clicando dentro del formulario subiera el form me conformaria. Si saco el botón del form funciona si lo coloco dentro , hace el intento, se anima, pero siempre acaba en la misma posición , alguien puede decirme como acutar con un botón desde dentro de un DIV ? pongo el código con el botón fuera, podrán comprobar que funciona correctamente, sin embargo , desde dentro solo realiza el intento.

Alguien puede iluminarme un poco ?

Muchas gracias,

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  margin:5px;
}
</style>
  <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
  
  
    <div class="form">
            <article align="rigth" style="padding:20px">
                    <form action="#" method="Post">
                        <table border="0" align="center">
                            <tr>
 
                                <td>
                                    <label><b>Buscar por texto</b>:</label>
                                    <input type="text" placeholder="Buscar" size="15" />
                                </td>
 
                                <td width="1%"></td>
                                
                                <td>
                                    <label><b>Precio</b>:</label>
 
                                    <select name="min_price">
                                      <option value="" selected="selected">Desde</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
                                
                                    <select name="max_price">
                                      <option value="" selected="selected">Hasta</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
                                </td>
 
                                <td width="1%"></td>
                                
                                <td>
                                    <label><b>Superficie</b>:</label>
 
                                    <select name="min_surface">
                                      <option value="" selected="selected">Desde</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
 
                                    <select name="max_surface">
                                      <option value="" selected="selected">Hasta</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
                                </td>
 
                                <td width="7%"></td>
 
                                <td>
                                    <input type="button" name="Boton" value="Buscar" OnClick="ejecutarBusqueda();">
                                </td>
 
                                <td width="5%"></td>
 
                                <td>
                                    
                                </td>
 
                            </tr>
 
                        </table>
                    </form>  
            </article>
        </div>
    <button id="avanzado" >Avanzado</button>
<script>
$("#avanzado").click(function(){
  $(".form").animate({"top": "+=50px"}, "slow");
});
 
$("#left").click(function(){
  $(".form").animate({"top": "-=50px"}, "slow");
});
 
</script>
 
</body>
</html>

kikeking1 · #2 (**permalink**) 04/05/2012, 04:27

El problema cuando añades el boton dentro del form, es que al hacer click en el se hace la llamada del form (fijate como en la barra de direcciones se añade la #).

Esta tan simple como evitar que el boton envie el formulario, para evitar el comportamiento por defecto de boton usaremos preventDefault(); (los cambios estan en negrita)

Código:

    $("#avanzado").click(function(event){
	  event.preventDefault();
      $(".form").animate({"top": "+=50px"}, "slow");
	  
    });