duda uso toggle en jquery

[prozaius]

Hola,

Tengo un div (#botón) actuando como botón. Quiero que al pulsarlo aparezca otro div oculto por defecto (#desple) y que al mismo tiempo se oscurezca la capa contenedora (#principal). Al volver a pulsar el botón todo debe volver a la situación incial. He conseguido que el div #desple funcione ok, pero no sé como alternar el tema de la opacidad, pues tal y como lo tengo se oscurece al primer click pero no retorna a la opacidad normal. El código utilizado es el siguiente:

Código:

$(document).ready(function(){
    $("#boton").click(function(event){
	$("#desple").toggle("slow");							   
	$("#principal").css("opacity",0.5);
});
});

También he intentado algo como esto pero no funciona:

Código:

$(document).ready(function(){
    $("#boton").click(function(){
	$("#desple").toggle("slow");							   
	$("#principal").toggle(function(){
            $("#principal").css("opacity",0.5);
});
});
});

Y complicando aún más la cosa, me gustaría que cuando se oscurezca el div #principal también se oscurezca el div #botón.


Agradezco alguna ayuda.

[JavierB]

Hola prozaius

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,

[masterpuppet]

Podrías hacer algo asi:

Código Javascript:

$(document).ready(function(){
   $("#boton").click(function(event){
      $("#desple").toggle("slow", function(){
         $("#principal").css("opacity", $(this).is(':visible') ? 1 : 0.5);
      });                                    
   });
});
 

Saludos.

[marlanga]

Pues yo lo haría así:

Código:

	
$(function(){
	$("#boton").toggle(
		function(){
			$("#principal").fadeTo("slow",0.5, function() { $("#desple").fadeIn("slow"); });
		},
		function(){
			$("#desple").fadeOut("slow",function(){ $("#principal").fadeTo("slow",1); });
		}
	);
});

[prozaius]

Muchas gracias por vuestras respuestas, estudiaré ambas.

Otro problema que me ha surgido: en vez de un desplegable, tengo 3 (#desple1,#desple2,#desple3) situados en la misma posición y todos con display none y overflow hidden y tres botones, cada uno debe actuar sobre un desple haciendo lo mismo que os comentaba en mi primera pregunta. He conseguido que haciendo dos clicks seguidos sobre el mismo botón funcione su desple, es decir, con el primer click aparece y con el segundo se oculta, pero si por ejemplo hago un sólo click en el primer botón (y por tanto aparece su desple) y a continuación hago click en otro botón se produce un desbordamiento y no aparece su desple en lugar del primero, sino en otro lugar. ¿Cómo podría solucionarlo?

El código es el siguiente:

Código Javascript:

$(document).ready(function(){
    $("#boton1").click(function(){
    $("#desple1").toggle("slow");
});
    $("#boton2").click(function(){
    $("#desple2").toggle("slow");
});
    $("#boton3").click(function(){
    $("#desple3").toggle("slow");
});
});
 

Gracias de nuevo.

[prozaius]

Bueno, era un problema de poner el posicionamiento de los div como absolute, así que arreglado.