Foros del Web » Programando para Internet » Jquery »

JQuery animar div desde un botón del div

Estas en el tema de JQuery animar div desde un botón del div en el foro de Jquery en Foros del Web. Buenas tardes, Llevo intentando un ratito, y no acabo de comprender el porque se limita, es decir : creo un doctype, script de jquery y ...
  #1 (permalink)  
Antiguo 03/05/2012, 11:29
 
Fecha de Ingreso: mayo-2012
Mensajes: 1
Antigüedad: 7 años, 2 meses
Puntos: 0
JQuery animar div desde un botón del div

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
  1. <!DOCTYPE html>
  2.   <style>
  3. div {
  4.   position:absolute;
  5.   background-color:#abc;
  6.   margin:5px;
  7. }
  8.   <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
  9. </head>
  10.   <button id="left">&laquo;</button> <button id="right">&raquo;</button>
  11.  
  12.  
  13.     <div class="form">
  14.             <article align="rigth" style="padding:20px">
  15.                     <form action="#" method="Post">
  16.                         <table border="0" align="center">
  17.                             <tr>
  18.  
  19.                                 <td>
  20.                                     <label><b>Buscar por texto</b>:</label>
  21.                                     <input type="text" placeholder="Buscar" size="15" />
  22.                                 </td>
  23.  
  24.                                 <td width="1%"></td>
  25.                                
  26.                                 <td>
  27.                                     <label><b>Precio</b>:</label>
  28.  
  29.                                     <select name="min_price">
  30.                                       <option value="" selected="selected">Desde</option>
  31.                                       <option value="windows">0</option>
  32.                                       <option value="mac">1000</option>
  33.                                       <option value="linux">100000</option>
  34.                                       <option value="otro">1000000</option>
  35.                                     </select>
  36.                                
  37.                                     <select name="max_price">
  38.                                       <option value="" selected="selected">Hasta</option>
  39.                                       <option value="windows">0</option>
  40.                                       <option value="mac">1000</option>
  41.                                       <option value="linux">100000</option>
  42.                                       <option value="otro">1000000</option>
  43.                                     </select>
  44.                                 </td>
  45.  
  46.                                 <td width="1%"></td>
  47.                                
  48.                                 <td>
  49.                                     <label><b>Superficie</b>:</label>
  50.  
  51.                                     <select name="min_surface">
  52.                                       <option value="" selected="selected">Desde</option>
  53.                                       <option value="windows">0</option>
  54.                                       <option value="mac">1000</option>
  55.                                       <option value="linux">100000</option>
  56.                                       <option value="otro">1000000</option>
  57.                                     </select>
  58.  
  59.                                     <select name="max_surface">
  60.                                       <option value="" selected="selected">Hasta</option>
  61.                                       <option value="windows">0</option>
  62.                                       <option value="mac">1000</option>
  63.                                       <option value="linux">100000</option>
  64.                                       <option value="otro">1000000</option>
  65.                                     </select>
  66.                                 </td>
  67.  
  68.                                 <td width="7%"></td>
  69.  
  70.                                 <td>
  71.                                     <input type="button" name="Boton" value="Buscar" OnClick="ejecutarBusqueda();">
  72.                                 </td>
  73.  
  74.                                 <td width="5%"></td>
  75.  
  76.                                 <td>
  77.                                    
  78.                                 </td>
  79.  
  80.                             </tr>
  81.  
  82.                         </table>
  83.                     </form>  
  84.             </article>
  85.         </div>
  86.     <button id="avanzado" >Avanzado</button>
  87. $("#avanzado").click(function(){
  88.   $(".form").animate({"top": "+=50px"}, "slow");
  89. });
  90.  
  91. $("#left").click(function(){
  92.   $(".form").animate({"top": "-=50px"}, "slow");
  93. });
  94.  
  95.  
  96. </body>
  97. </html>
  #2 (permalink)  
Antiguo 04/05/2012, 04:27
 
Fecha de Ingreso: junio-2009
Mensajes: 128
Antigüedad: 10 años, 1 mes
Puntos: 17
Respuesta: JQuery animar div desde un botón del div

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");
	  
    });

Etiquetas: formulario, funcion, html, input, javascript, js, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:43.