mover imagenes onclick con jquery

[gAb1]

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?

[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.

[gAb1]

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

Código (html) [Seleccionar] Expandir


$(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:

Código (html) [Seleccionar] Expandir


<div id="layer_0" class="layer_0"></div>


[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".

Código (javascript) [Seleccionar] Expandir


      $(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 

[gAb1]

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

[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.

[gAb1]

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 (html) [Seleccionar] Expandir


$(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...

[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 

[gAb1]

Hahaha... claro, poner la imagen directamente en html.

[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.