Mensajes

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 

Tiene que ser de escritorio?
Sino, PHP que ya sabes, no tendrías problemas.

Pero si es de escritorio y con una sintaxis NO-PARECIDA a visual basic que tambien lo detesto xD (hablo solo de la sintaxis) puede ser C#, JAVA.

[$( ".layer_2:first" ).animate(]

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.

Código (javascript) [Seleccionar] Expandir


$("#design_menu").show().delay(1000); // not working ???


Cambialo por

Código (javascript) [Seleccionar] Expandir


$("#design_menu").fadeIn();

MODIFICO:
En todo caso, tu delay deberia funcionar, creo que el problema es el otro y lo que te planteo despues.

Para mas propiedades respecto a fadeIn
http://api.jquery.com/fadein/

respecto a lo que ocultas, si tienes por ejemplo un div padre y lo tienes oculto y tambien tienes explicitamente oculto el hijo. Entonces, al mostrar el padre, NO SE MOSTRARA EL HIJO, hasta que le pongas display:block explicitamente al igual que el padre, esto se puede hacer con el show, el fadein, etc.
<div id="padre" style="display:none">
<div id="hijo" style="display:none" >
</div>
</div>

¿Que problemas quedan?

Si, ese código es de la otra imagen, que debe de ir hacia la derecha.

Además, ¿donde se supone que debo poner el mismo codigo pero con el -100? dentro del mismo click? debajo del todo? pero donde dice layer_2:first poner second?

En que momento quieres que vuelva a su posición original? Cuando le des click por segunda vez y ya este en la corrida? pero quieres que en ese momento solo vuelva a su posición original y nada más?

Acuerda que tu tenias left:100
te dije que si querias que volveria a su posicion debia ser left:-100

No estoy seguro pero supongo que es lo contrario con lo que hiciste xD

Código (javascript) [Seleccionar] Expandir


$( ".layer_1:first" ).animate({ left: -100}, { duration: 1000, step: function( now, fx ){
$( ".layer_1:gt(0)" ).css( "left", now );


Recuerda el ejemplo que te puse

Código (javascript) [Seleccionar] Expandir


$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});

$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});

Fijate cuando va a la derecha, le suma pixeles, cuando va al lado izquierdo, le resta la misma cantidad de pixeles.

Asi que debería servir con lo que te puse primero.

Te refieres a que el animate vuelva a su posición original de forma animada también?

Primero, si vas a llamar a la funcion click de un div, solo necesitas un evento por cada div diferente, no deberias llamar al mismo div $("idDiv").click dos veces.

y solo es necesario un solo $(document).ready en todo el DOM

En palabras simples así debería ser.

Código (javascript) [Seleccionar] Expandir



   
    //Inicio document.ready
$(document).ready(function(){
    //inicio layer 0 click
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
$("#layer_1").hide();
$( ".layer_0:first" ).animate({ left: 100}, { duration: 1000, step: function( now, fx ){
$( ".layer_0:gt(0)" ).css( "left", now );
}
});
//fin layer 0 click
});

//inicio layer 1 click
$("#layer_1").click(function(){
$(this).toggleClass("layer_3");
$("#layer_0").hide();

$( ".layer_1:first" ).animate({ left: 100}, { duration: 1000, step: function( now, fx ){
$( ".layer_1:gt(0)" ).css( "left", now );
}

});
//fin layer 1 click
});

//fin document.ready
});