Si es posible, si, para poder ver el otro menu, osea la otra imagen que hace exactamente lo mismo. Son como dos menus, si uno se muestra el otro se oculta.

Aah vale claro, si estaba pensando justamente en algo asi. Voy a probar y te cuento.

Pero hay un problema, y es que hacia la derecha no funciona!

$(document).ready(function(){
$("#layer_1").click(function(){
$(this).toggleClass("layer_3");
$("#layer_0").hide();
$( ".layer_3:first" ).animate({ right: 100}, { duration: 1000, step: function( now, fx ){
$( ".layer_3:gt(0)" ).css( "right", now );
}
});
});
});
 
 

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?

Quiero que vuelva con el segundo click, es decir, el primer click lo corre a la izquierda y una vez quieto si se le vuelve a dar, el segundo, que vuelva a su posicion original y aparte que muestre el que se oculto.

Y lo otro, me refiero a que la función animate solo funciona hacia la izquierda, no se mueve hacia la derecha y necesito que la otra imagen gire a la derecha.

---

Otra cosa, desde que empece tengo un problema muy extraño con el css... Las dos imagenes ocultas que se deben mostrar al click, segun las opciones css estan en la misma posicion que las visibles, pero cuando en el codigo html quito lo de oculto y las veo que estan en otra posición, pero en las opciones tienen la misma posicion... Por ejemplo layer_0 esta en left:700px y top:170px y layer_02 igual, pero en el diseño esta en otra posicion...

¿Como es esto posible?

Me molesta porque rompe la resolución de toda la pagina y salen las barras para subir y mover al lado, aunque no se vea nada porque estan ocultas...

EDITO: Vale, ya lo he solucionado los problemas, lo del css y la posicion era porque el div de la imagen estaba dentro de otro div con otra imagen, por eso cuando ponia una encima de la otra marca posicion left y top 0... Y lo otro, efectivamente he tenido que trastear para averiguar que numero negativo equivalia al 100, el mas parecido -1550 para que se moviera el mismo tramo.

Ahora mismo tengo un problema que no funciona el .show() y no consigo averiguar que pasa...

$(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 ){
$( ".layer_2:gt(0)" ).css( "left", now );
}
});
$("#design_menu").show().delay(1000); // not working ???
});
});
 

He probado tambien cambiandolo a class, pero nada, el html es igual que el de antes:

<div id="design">
        <div id="design_menu" class="design_menu" style="visibility:hidden">
        	<div id="web_design" class="web_design">
 

Debajo de design_menu hay 6 divs que son las opciones, debajo de cada opcion hay tablas que deben quedar ocultas hasta que se pinche en una opcion y muestre su tabla. Las tablas las tengo ocultas en css con visibility:hidden.

Ahora el problema, es que el script no muestra las opciones, bueno muestra el design_menu y las opciones al ser child, deberian de mostrarse, no? Como hago para que no se muestren las tablas que deben quedar ocultas hasta pinchar las opciones?

Llevo horas dandole vueltas y probando muchas cosas...