Para ocultar y poner otra vez visible una capa o cualquier otro elemento de html tenemos varias posibilidades, aqui venemos la forma mas sencilla de hacerlo, que es utilizando .hide() para ocultar y .show() para mostrarlo si esta oculto.
Mas abajo veremos el codigo utilizado así como la prueba con el código descrito.
<script>
function esconde_div(){$("#capa").hide();}
function visible_div(){$("#capa").show();}
</script>
<input type="button" onclick="javascript:esconde_div();" value="Ocultar div" />
<input type="button" onclick="javascript:visible_div();" value="div visible" />
<div id="capa">esto es una capa</div>
esto es una capa
Tambien podemos utilizar toggle([velocidad], [tipo_animacion], [callback]), para hacer desaparecer una capa con efecto.
[velocidad] (‘slow’,’fast’, milisegundos)
como podemos imaginar esto corresponde al tipo de animación, slow es lento, fast es rapido, y milisegundos es el numero de milisegundos que queremos que tenga la animación
[tipo_animacion] (‘swing’,’linear’)
El tipo de animación linear, lo que hace es que tiene una velocidad lineal, simpre la misma y swing al principio y al final va mas rapido que en mitad de la animación. si es una capa pequeña, no se llega a apreciar.
swing
[callback]
aqui ponemos la llamada que queremos que haga cuando termina la animación.
Mas abajo veremos el codigo utilizado así como la prueba con el código descrito.
<script>
function cambia_estado_div(){$("#capa2").toggle('slow','linear');}
function cambia_estado_div2(){$("#capa2").toggle('slow','swing');}
</script>
<input class="botones" type="button" onclick="javascript:cambia_estado_div();" value="Cambia estado div linear" />
<input class="botones" type="button" onclick="javascript:cambia_estado_div2();" value="Cambia estado div swing" />
<div id="capa2">esto es una capa</div>
esto es una capa
