 Autor
|
Tema: mover imagenes onclick con jquery (Leído 20,911 veces)
|
gAb1
 Desconectado
Mensajes: 731
|
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
|
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
Mensajes: 731
|
Claro, el codigo que hace el click es el que puse antes $(document).ready(function(){ $("#layer_0").click(function(){ $(this).toggleClass("layer_2"); $("#photo").hide(); $("#layer_1").hide(); $( ".layer_2:first" ).animate({ 'left': 100}, { duration: 1000, step: function( now, fx ){ // animacion $( ".layer_2:gt(0)" ).css( "left", now ); // animacion } }); $("#design_menu").fadeIn(); }); });
Y este es el html, igual que siempre, llama una imagen y hace de boton: <div id="layer_0" class="layer_0"></div>
|
|
|
|
|
En línea
|
|
|
|
|
Pablo Videla
|
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". $(document).ready(function() { var primerClick = true; $("#layer_0").click(function() { if (primerClick) { $(this).toggleClass("layer_2"); $("#photo").hide(); $("#layer_1").hide(); $(".layer_2:first").animate({'left': 100}, {duration: 1000, step: function(now, fx) { // animacion $(".layer_2:gt(0)").css("left", now); // animacion primerClick = false; } }); alert('Estoy en el primer click, borralo despues de haberlo testeado'); $("#design_menu").fadeIn(); } else { $(".layer_2:first").animate({'left': -100}, {duration: 1000, step: function(now, fx) { // animacion $(".layer_2:gt(0)").css("left", now); // animacion primerClick = true; } }); alert('Esto es por debug, borralo despues, estoy en el segundo click?'); } } });
Me avisas si te sirve  |
|
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
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
|
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 . Saludos.
|
|
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
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: $(document).ready(function(){ $("#web_design").click(function(){ // div - imagen - opcion $("#layout_content").hide(); // tabla $("#corporate_image_content").hide(); // tabla $("#picture_content").hide(); // tabla $("#pacakin_content").hide(); // tabla $("#digital_printing_content").hide(); // tabla $("#web_design_content").toggle(); // tabla }); });
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
|
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
|
|
|
|
« Última modificación: 21 Abril 2014, 20:57 pm por DonVidela »
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Hahaha... claro, poner la imagen directamente en html.
|
|
|
|
|
En línea
|
|
|
|
|
Pablo Videla
|
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
|
|
|
|
|
| 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
|
6,199
|
9 Junio 2008, 00:03 am
por seba123neo
|
|
|
|
mover Css Jquery
Desarrollo Web
|
David Vans
|
4
|
4,577
|
20 Mayo 2011, 11:08 am
por David Vans
|
|
|
|
vectores con imagenes y evento onclick
« 1 2 »
PHP
|
Atemu
|
12
|
6,617
|
2 Julio 2013, 19:12 pm
por Atemu
|
|
|
|
vectores con imagenes y evento onclick
PHP
|
Atemu
|
2
|
1,746
|
26 Junio 2013, 03:30 am
por Atemu
|
|
|
|
como mover una sección hasta el final de otra con jquery
Desarrollo Web
|
colcrt
|
3
|
2,588
|
16 Marzo 2019, 04:48 am
por #!drvy
|
 |
