mostrar/ocultar capa div superpuesta con jquery y javascript

alette666 · #1 (**permalink**) 27/12/2011, 19:42

Buenas gente acá les doy un proyecto reciente en donde quiero que me ayuden a que termine realizando lo que quiero (ya tengo un 73% de lo que quiero que haga).

archivos que fueron necesarios:

libreria jquery (jquery-latest.js)
index.html

Bien empecemos.

Código HTML:

<html>
<head>
<title>Mostrar/Ocultar capas superpuestas</title>

<style media="screen" type="text/css">
#div1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	position:absolute;
	width:200px;
	height:56px;
	z-index:1;
	left: 185px;
	top: 14px;
	margin:5px;
	float: right;
	background-color:#0F0;
}

#div2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	position:absolute;
	width:200px;
	height:56px;
	z-index:2;
	left: 395px;
	top: 13px;
	margin:5px;
	float: right;
	background-color:#F00;
}
  </style>
<!--/llamada de la librería desde Jquery/-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table width="18%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%"><input type="button" value="boton 1"/></td>
    <td width="80%">
    &nbsp;
<script>
//efecto de transicion del modo de ocultación/aparición
	var toggleFx = function() {
  	$.fx.off = !$.fx.off;
	};
	toggleFx();

	$("button").click(toggleFx)

	$("input").click(function(){
  	$("div").toggle("slow");
	});
</script>  
    <div id="div1">Aca va contenido 2</div></td>
  </tr>
  <tr>
  <td> <input type="button" value="boton 2"/></td>
  <td>
  &nbsp;
<script>
//efecto de transicion del modo de ocultación/aparición
	var toggleFx = function() {
  	$.fx.off = !$.fx.off;
	};
	toggleFx();

	$("button").click(toggleFx)

	$("input").click(function(){
 	 $("span").toggle("slow");
	});
</script>  
    <span id="div2">Aca va contenido 1</span></td>
  </tr>
</table>
</body>
</html>

Bien a Explicar

Lo que lograremos es crear dos capas superpuestas (en este ejemplo los separe a una distancia que se vean las dos capas, una al lado de la otra), lo que se lograría es que desaparezca una capa y de inmediato aparezca la otra por encima de la que estaba antes.

Como vemos en el ejemplo (Ver Ejemplo del sistema), aparecen los dos div de color verde y rojo uno al aldo del otro; Al precionar "botón 1" desaparecen las dos capas y al volver precionar "boton 1" aparecen de nuevo.
Bien, ahora si precionamos "botón 2"desaparecera el div de color rojo, si lo volvemos a presionar al "botón 2" volvera a aparecer.
jeje aca vamos de nuevo

ahora volvemos a presionar "botón 2" (desaparece div rojo quedando a la vista div verde); presionamos "botón 1"; y desaparecera div verde y aparecera div rojo; volvemos a apretar "boton 1" y desaparecera div rojo y aparecera el verde.....
Y NO SIGO MAS PORQUE YA ME CANSE

Bien ahora acá va mi pregunta ¬¬''

Quiero hacer que este capa 1 a la vista, al presionar "botón 2" que desaparezca la capa 1 y aparezca la capa 2; y al presionar botón 1 que desaparezca capa 2 y aparezca capa 1. ¿Como lo termino de realizar al código??, para que haga tal cual recién expuse mi pregunta.

MUCHAS GRACIAS Y FELIZ AÑO NUEVO PARA TODOS