Comunidad de diseño web y desarrollo en internet online

Iniciar animación jquery desde dos o más botones o lugares

Citar            
MensajeEscrito el 07 May 2015 12:43 pm
Saludos comunidad.

Planteo la siguiente situación: Tengo 3 objetos: un panel lateral inicialmente oculto, un botón de menu siempre visible y una máscara con opacidad que oscurece el contenido al aparecer el panel. Para animar los elementos he usado Toggle. El comportamiento debe ser el siguiente: al pulsar el botón menú, aparece el panel, se osurece el contenido con la máscara y el botón se mueve un poco de derecha a izquierda. Al pulsar nuevamente en el botón o en la máscara el panel se oculta, desaparece la máscara y el botón vuelve a su posición inicial. Todo lo anterior lo hago con el siguiente código:

Código Java :

$('#b-menu,#mask').toggle(function(){
   $('nav').stop().animate({left:'0'},'normal').addClass('sombra');
   $('#b-menu').stop().animate({left:'204'},'slow');
   $('#mask').fadeIn()
},function(){
   $('nav').stop().animate({left:'-250'},'slow').removeClass('sombra');
   $('#b-menu').stop().animate({left:'0'},'normal');
   $('#mask').fadeOut()
});

Así como está funciona todo tal como lo deseo, excepto por el siguiente detalle: si hago clic en menu se activan las animaciones y si hago nuevamente clic en menu todo vuelve al estado inicial, pero si hago clic en menu y para cerrar el panel hago click en la máscara no pasa nada con un clic, sino ¡con dos! Al primer clic no pasa nada, pero al segundo se activa la animación de cierre. Luego, si quiero habrir el menu otra vez (tras haberlo cerrado con la máscara), nuevamente requiero de dos clics. Tras esto sólo requiero un clic para abrir o cerrar por medio del botón, pero si nuevamente uso la máscara para cerrar ocurre todo nuevamente.

Intuyo que el problema tiene que ver con el querer activar las animaciones con toggle desde dos "botones" diferentes, como que la animación no se cierra adecuadamente o algo por el estilo. El tema es que todo debería ocurrir "al clic" y es molesto tener que hacer dos clics para que la cosa funcione.

Mi post anterior tiene que ver con lo mismo. La idea es que al hacer clic en el botón atrás de android o en la tecla escape del teclado, se activen las animaciones de cierre. Con la tecla escape lo he conseguido pero tento el mismo drama del doble clic.

Se agradecerán todos los aportes. Espero haberme explicado bien. Seguro que es una tontera. De antemano muchas gracias.

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 May 2015 04:10 pm
ES un comportamiento normal de tu aplicación, utiliza Google dev tools o cualquiera de tu preferencia, para hacer un debug a tu función y ver lo que pasa :)

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 12 May 2015 11:33 am
Gracias por responder elporfirio. Hice lo que sugeriste y la consola no me muestra error. U.U y no encuentro forma de lograr que todo funcione con un solo clic como debe ser. U.U

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 May 2015 03:05 pm
HAgamos algo publicalo en http://jsbin.com

y ya vemos que podemos hacer :) asi podemos ver el comportamiento.

saludos.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 13 May 2015 11:14 pm
Gracias elporfirio por el interés.

Hice lo que me sugeriste, así que a continuación dejo el link del proyecto. He suprimido todo lo relacionado con el diseño, limitándome a lo básico para no ensuciar el código. De todas formas, hoy probé con cero estilos y el comportamiento es el mismo, de modo que en primera instancia creo que no sería un problema del css.

El enlace es el siguiente:

http://jsbin.com/penewe/4/edit?html,css,js,output

Quedo atento a cualquier comentario. Saludos y gracias una vez más.

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 20 May 2015 12:52 am
¿Nadie que pueda darme alguna pista de cómo solucionar el problema con este código?

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 20 May 2015 03:54 pm
Lo que dices es que al dar click en el cuadro "gris" con la navegación, ya no se vuelve a ocultar el menu ??

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 24 May 2015 03:11 am
Explico para mayor claridad lo que hace el script publicado en jsbin:

Al hacer click sólo en el botón menú. Esto funciona bien.

1. Click en botón menú: aparece el panel (1° click en botón)
2. Click en botón menú: oculta el menú (2° click en botón)

Al hacer click en botón menú y máscara (zona oscurecida bajo el panel):

1. Click en botón menú: aparece el panel (1° click en botón)
2. Click en máscara: no funciona (1° click en máscara)
3. Click en máscara: oculta el panel (2° click en máscara)

1° problema. Debería ocultar el panel al primer click y no al segundo.

4. Click en botón menú: no funciona (1° click en botón después de ocultar en el paso 3)
5. Click en botón menú: muestra el panel (2° click en botón después de ocultar)

2° problema. Tras ocultar por medio de la máscara el botón no responde al primer click pero sí al segundo.

Y el fenómeno se repite infinitamente. Si muestro/oculto con el botón la máscara requiere de dos click para funcionar, y si cierro con la máscara es el botón el que requiere de dos click.

¡Y lo que quiero es que funcione todo sólo por medio de un click!

Espero haber sido claro en mi descripción. Agradezco nuevamente la buena voluntad de siempre.

Saludos cordiales.

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 24 May 2015 04:02 am
Y acabo de descubrir algo inefable. Estaba usando por defecto la versión 1.7.2 de jquery. Cambié el link a la última versión 2.1.3 (todo siempre desde google) y ahora el botón ni siquiera se ve. Colapsé.

:shock: :shock: :shock:

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.