mover imagenes onclick con jquery

[gAb1]

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.

[Pablo Videla]

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.

[gAb1]

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!

Código (javascript) [Seleccionar] Expandir


$(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 );
}
});
});
});



[Pablo Videla]

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

[gAb1]

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?

[Pablo Videla]

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?

[gAb1]

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.

[Pablo Videla]

¿Que problemas quedan?

[gAb1]

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

Código (javascript) [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 ){
$( ".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:

Código (javascript) [Seleccionar] Expandir


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

[Pablo Videla]

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>