Fallo con slideToggle de JQuery

iEnrique · #1 (**permalink**) 30/07/2013, 04:09

Estoy haciendo un div que al pulsar se agrande y se encoja. Ese cuadrado, al ser el de las notificaciones pues va por encima de toda la página web. Ese cuadrado tiene un "margin-right:-150px;".

Funciona todo bien pero la animación se ve únicamente el div a la mitad, ya que el 150px no se ve se ve como un width:100px cuando debería ser width:250px;

La animación funciona perfectamente y una vez terminada el div vuelve a la normalidad pero no me gustaría que fuera así...

Muchas gracias

iEnrique · #2 (**permalink**) 03/08/2013, 10:46

¿Nadie sabe? Siento el doble post.

fhederico · #3 (**permalink**) 08/08/2013, 23:04

Hola,

Puedes poner el codigo o mostrar alguna URL donde verlo para entender un poco mejor el error?

Saludos

iEnrique · #4 (**permalink**) 13/08/2013, 06:14

Está iniciando sesión en esta web http://www.lemite.uni.me es en el menú de arriba donde se encuentra el botón de las notificaciones y donde hace el movimiento.

fhederico · #5 (**permalink**) 13/08/2013, 09:35

Uff...

Hombre, me registre... se cayo... le di reload... y me dijo que ya existia... empezamos muy mal...

Tus novedades se ven al final de no se que, y las notificaciones, por lo menos el boton que es muy similar al de Google+ funciona bien, no veo tu error...

A y en tu Home... revisala en Firefox... se ve corrida xD

Saludos

iEnrique · #6 (**permalink**) 15/08/2013, 04:12

Es que la web es para Chrome únicamente, por eso se ve mal en otros y tiene el estilo Google. Tienes Chrome? Es que es en Chrome donde ocurre el fallo. Muchas gracias por el esfuerzo :)

fhederico · #7 (**permalink**) 15/08/2013, 14:17

Hola,

La verdad que hacer una pagina que funciona solo en un navegador, no es lo mas recomendado pero bueno, eso es decision tuya.

Tu error se debe a que al ocupar "slideToggle", esta agrega al contenedor cuando lo esta ocultando "overflow:hidden;", lo que hace que no se muestre todo el contenido, es decir, oculta los bordes (por tu margin -150), como solo dura unos segundos, da el efecto de corte, puedes reproducirlo poniendo

Código:

<div id="contenedor" class="notifications" style="display;none;overflow:hidden;">

Esto ya es CSS, le estoy dando una vuelta pero por ahora no he encontrado ninguna solucion rapida y que no implique modificar mucho, te dejo el error por si se te ocurre algo.

Saludos

iEnrique · #8 (**permalink**) 16/08/2013, 06:12

Vale, muchas gracias por tu ayuda!

vesper_metal90 · #9 (**permalink**) 20/08/2013, 00:56

http://api.jquery.com/slideDown/