elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  mover imagenes onclick con jquery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: 1 2 3 [4] 5 Ir Abajo Respuesta Imprimir
Autor Tema: mover imagenes onclick con jquery  (Leído 14,147 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #30 en: 21 Abril 2014, 18:34 pm »

Vale, si que funciona, el padre display none y los hijos display block.

Ahora me toca volver al tema de la animacion, hacer que vuelva a la posicion original con el segundo click...

¿Se puede hacer el animate para que corra un script cuando se le hace click por segunda vez? Donde dice $( ".layer_2:first" ).animate( ese first quiere decir el primer click? o para que sirve? se puede configurar para que corra una funcion al segundo click?


En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #31 en: 21 Abril 2014, 18:41 pm »

Vale, si que funciona, el padre display none y los hijos display block.

Ahora me toca volver al tema de la animacion, hacer que vuelva a la posicion original con el segundo click...

¿Se puede hacer el animate para que corra un script cuando se le hace click por segunda vez? Donde dice $( ".layer_2:first" ).animate( ese first quiere decir el primer click? o para que sirve? se puede configurar para que corra una funcion al segundo click?

Si bueno, eso tiene solución, habrá que validar de alguna forma, que cuando este en el lado X, vuelva a la posición original, sino, que haga lo que tenga que hacer y moverse a la derecha.

Puedes pegarme el codigo de un click de layer para ver lo que hace.


En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #32 en: 21 Abril 2014, 18:58 pm »

Claro, el codigo que hace el click es el que puse antes

Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. $("#photo").hide();
  5. $("#layer_1").hide();
  6. $( ".layer_2:first" ).animate({ 'left': 100}, { duration: 1000, step: function( now, fx ){  // animacion
  7. $( ".layer_2:gt(0)" ).css( "left", now );  // animacion
  8. }
  9. });
  10. $("#design_menu").fadeIn();
  11. });
  12. });
  13.  

Y este es el html, igual que siempre, llama una imagen y hace de boton:

Código
  1. <div id="layer_0" class="layer_0"></div>
  2.  
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #33 en: 21 Abril 2014, 19:11 pm »

Mira la verdad de las cosas, lo que acabo de hacer no esta probado ni nada, asi que no es seguro que funcione, pero es simplemente una idea de como verificar si estas en el primer o segundo click del mismo "boton".

Código
  1.      $(document).ready(function() {
  2.  
  3.            var primerClick = true;
  4.            $("#layer_0").click(function() {
  5.  
  6.                if (primerClick) {
  7.  
  8.                    $(this).toggleClass("layer_2");
  9.                    $("#photo").hide();
  10.                    $("#layer_1").hide();
  11.                    $(".layer_2:first").animate({'left': 100}, {duration: 1000, step: function(now, fx) {  // animacion
  12.                            $(".layer_2:gt(0)").css("left", now);  // animacion
  13.                            primerClick = false;
  14.                        }
  15.                    });
  16.                    alert('Estoy en el primer click, borralo despues de haberlo testeado');
  17.                    $("#design_menu").fadeIn();
  18.                } else {
  19.  
  20.                    $(".layer_2:first").animate({'left': -100}, {duration: 1000, step: function(now, fx) {  // animacion
  21.                            $(".layer_2:gt(0)").css("left", now);  // animacion
  22.                            primerClick = true;
  23.                        }
  24.                    });
  25.                    alert('Esto es por debug, borralo despues, estoy en el segundo click?');
  26.                }
  27.  
  28.  
  29.            }
  30.            });
  31.  
  32.  
  33.  
Me avisas si te sirve  :xD
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #34 en: 21 Abril 2014, 19:28 pm »

Estoy probando, la penúltima llave le falta ");".

Pues por lo que veo, con el -100 se va igualmente a la izquierda, pero un poco solo, apenas sale de la pantalla, el -200 ya ni se ve, se sale.

La idea del segundo click funciona perfectamente, gracias. Ahora es cuestión de jugar con los numeritos para ver cual es el bueno... hehehh
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #35 en: 21 Abril 2014, 19:35 pm »

Estoy probando, la penúltima llave le falta ");".

Pues por lo que veo, con el -100 se va igualmente a la izquierda, pero un poco solo, apenas sale de la pantalla, el -200 ya ni se ve, se sale.

La idea del segundo click funciona perfectamente, gracias. Ahora es cuestión de jugar con los numeritos para ver cual es el bueno... hehehh

Excelente, nos avisas si es que todo sale bien, igual prueba la validación que hice, seguramente existen soluciones mas decentes  :xD.

Saludos.
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #36 en: 21 Abril 2014, 20:21 pm »

Hehehe todo ha salido perfecto, muchas gracias por la ayuda prestada!

Me queda ver porque las tablas que hay dentro de los divs reaccionan al toggle que solo debería activarse al darle click a la imagen (div) no a la tabla o lo que hay dentro... al darle click a la tabla o su contenido, desaparece, por el toggle sera...

Si sabes porque, o si hay una manera mejor de hacer esto:

Código
  1. $(document).ready(function(){
  2. $("#web_design").click(function(){             // div - imagen - opcion
  3. $("#layout_content").hide();                      // tabla
  4. $("#corporate_image_content").hide();      // tabla
  5. $("#picture_content").hide();                     // tabla
  6. $("#pacakin_content").hide();                    // tabla
  7. $("#digital_printing_content").hide();          // tabla
  8. $("#web_design_content").toggle();            // tabla
  9. });
  10. });
  11.  

Lo que quiero hacer con el código es, al hacer click en una opción, primero ocultar las otras 5 tablas (en el caso de que una este abierta) y mostrar u ocultar (depende de si esta ya abierta) la tabla correspondiente a esa opción clickada. Creo que es algo muy común que hacen muchos menús...
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #37 en: 21 Abril 2014, 20:51 pm »

Citar
Me queda ver porque las tablas que hay dentro de los divs reaccionan al toggle que solo debería activarse al darle click a la imagen (div) no a la tabla o lo que hay dentro... al darle click a la tabla o su contenido, desaparece, por el toggle sera...

Porque seguramente el div es un bloque que encierra todo el contenido, y seguramente donde presiones es parte del div y en consecuencia hara el efecto.


Lo que puedes hacer , es hacer que click escuche directamente a la imagen y no al div, pero tu imagen esta por CSS hummm... Dime si se te ocurre algo  :xD
« Última modificación: 21 Abril 2014, 20:57 pm por DonVidela » En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #38 en: 21 Abril 2014, 21:14 pm »

Hahaha... claro, poner la imagen directamente en html.
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.275



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #39 en: 21 Abril 2014, 21:18 pm »

Hahaha... claro, poner la imagen directamente en html.
Exactamente... dale un id y en vez de que el div sea tu boton, haz que la imagen sea el boton. Y esa sería la solución.
En línea

Páginas: 1 2 3 [4] 5 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
como acceder a mis imagenes y mover imagenes a una carpeta en C:\
Programación Visual Basic
ricardovinzo 3 4,644 Último mensaje 9 Junio 2008, 00:03 am
por seba123neo
mover Css Jquery
Desarrollo Web
David Vans 4 3,551 Último mensaje 20 Mayo 2011, 11:08 am
por David Vans
vectores con imagenes y evento onclick « 1 2 »
PHP
Atemu 12 4,017 Último mensaje 2 Julio 2013, 19:12 pm
por Atemu
vectores con imagenes y evento onclick
PHP
Atemu 2 1,056 Último mensaje 26 Junio 2013, 03:30 am
por Atemu
como mover una sección hasta el final de otra con jquery
Desarrollo Web
colcrt 3 1,093 Último mensaje 16 Marzo 2019, 04:48 am
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines