mover imagenes onclick con jquery

[gAb1]

Nada, ahora ni siquiera se vuelve a la original, al no ser toggle. Tampoco se quita la otra imagen.

[Pablo Videla]

Ok vamos por parte para que nos entendamos.

layer_0 , es un div con una imagen verdad, quieres que al hacer click, ¿aparezca que div con la imagen? (y quieres hacer desaparecer la imagen de layer_0).

[gAb1]

Si, al igual que los demás layer_x y los tengo con div, y si son imágenes.

Son 2 imágenes que forman 1, en blanco y negro. Las otras 2 imágenes son las mismas solo que con color y brillantes y también forman 1 imagen, aunque esta cortada en 2.

layer_2 y layer_3 remplazan a layer_0 y layer_1 al pasar el raton por encima y al hacer click.

layer 2 y 3 son en color y lo que quiero hacer es que al hacer click en una de las dos imágenes se cambie (aunque ya esta en color porque al pasar el raton por encima se activa la función hover de css y cambia las imagenes mientras este encima) y la otra imagen que hay al lado se oculte para dejar espacio. Lo primero lo hace perfectamente toggle, lo de ocultar la otra imagen todavia falta por hacerlo.

Son dos imágenes que forman una figura pero partida, cuando se hace click en una se desplaza a un lado y la otra se oculta y aparece un menu al lado de la que se ha desplazado, aparte de cambiar la imagen de blanco y negro a color.

Espero no haberte creado más dudas... hehehhe

[Pablo Videla]

layer_2 y layer_3 remplazan a layer_0 y layer_1 al pasar el raton por encima y al hacer click.

Lo que quiero hacer es que al hacer click en una de las dos imágenes aparezca en color y la otra imagen que hay al lado se oculte para dejar espacio.

Para reemplazar el estilo ya sabes que es con toggle o usando removeClass y addClass, si quieres ocultar algo puedes usar

Código (javascript) [Seleccionar] Expandir


$("#idDiv").hide();


para volver a mostrarlo puedes usar

Código (javascript) [Seleccionar] Expandir


$("#idDiv").show();


Si quieres ocultar con animacion puedes usar el fadeIn() y el fadeOut() en vez de hide y show()

[gAb1]

Entonces me gustaria usar toggle por la posibilidad de que se vuelva a como estaba. Entonces seria usar el script del toggle añadiendole eso? asi?

Código (javascript) [Seleccionar] Expandir


   $(document).ready(function(){
   $("#layer_0").click(function(){
   $(this).toggleClass("layer_2");
   $("#layer_1").hide();
   });
   });

funciona, asi esta bien.

Ahora lo que necesito es mover lateralmente la imagen al hacerle click. Mover, deslizar... mientras vaya moviéndose hacia un lado me sirve, he estado mirando, pero creo que no encuentro la función que necesito. Y cuando termine de mover la imagen mostrar el menu al lado, eso supongo que es igual con el style hidden y usando el toggle, no?

muchas gracias!

[Pablo Videla]

Te recomiendo visitar la pagina de jquery y ver la documentación, hay miles de eventos geniales.

A ti para mover la imagen de forma lateral te puede servir el animate()

https://api.jquery.com/animate/

Del mismo link saco lo que necesitas.

Código (javascript) [Seleccionar] Expandir



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

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


Visita el sitio, te encontraras con mas funciones y propiedades.

Saludos 

[gAb1]

Hola, he estado ojeando la pagina y he sacado de un ejemplo otro posible script y al parecer funciona hehehe

Lo que me gustaría hacer es algo que seguramente es dificil, seria que al volver a darle a la imagen movida, vuelva a la posicion original y vuelva a aparecer la otra imagen que se oculto.

Este es el codigo:

Código (javascript) [Seleccionar] Expandir


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


Lo que hace actualmente, una vez ha terminado de moverse, al volver a darse tan solo muestra la otra imagen sin color.

Lo que necesito es algo parecido al toggle ese pero para el animate...

[Pablo Videla]

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




[gAb1]

Si, lo siento, me acababa de dar cuenta y había modificado, pero ya habías respondido, hehehe

Como puedo hacer para que el animate vuelva otra vez al hacer click, al igual que el togge?

[Pablo Videla]

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