Mostrar y ocultar una capa con JQuery al pulsar un botón. Código Fuente.
Siguiendo con JQuery, en este código fuente os muestro como hacer desaparecer una capa y hacerla aparecer al pulsar un botón u otro, según se quiera que se muestre o se oculte la capa.
En mi caso pensando en lo que estoy construyendo que será un juego arcade que poco a poco va tomando forma, en este caso, necesitaba hacer que aparezca y desaparezca una capa que serán los “objetivos a los que disparar” desde nuestra base que ya vimos en anteriores artículos.
Sin más os dejo con el código fuente que es bastante sencillo, he de decir que no es JQuery puro, ya que utilizo Javascript para la llamada de la función desde los botones, pero bueno, poco a poco iré trazando todo en JQuery que es lo que voy buscando.
<!DOCTYPE html>
<html>
<head>
<title>Mostrar y ocultar capas con Jquery utilizando el efecto FadeOn y FadeOut</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=”text/javascript”>
/* Al lanzar la función ocultar para la capa txtObjetivo, lanzo un fadeOut para hacerla desaparecer y así dejar de mostrarla*/
function Ocultar()
{
$(‘#txtObjetivo’).fadeOut();
};/*Con la función mostrar hago uso de fadeIn para que la capa esté o no esté oculta se muestre de manera que aparezca*/
function Mostrar()
{
$(‘#txtObjetivo’).fadeIn();
};
</script>
</head>
<body>
Ejemplo de como mostrar y ocultar capas con efecto on y off de JQuery al pulsar un botón para ocultar y otro para mostrar
<input type=”button” name=”Ocultar” id=”Ocultar” value=”Ocultar” onClick=”Ocultar()”>
<input type=”button” name=”Mostrar” id=”Mostrar” value=”Mostrar” onClick=”Mostrar()”>
<div id=”txtObjetivo”>Aquí se disparará</div>
<br /><br /><br /><br /><br /><br /><br />
<a href=”http://vertutoriales.com/?p=3134″>Tutorial completo de como funciona el código fuente para mostrar u ocultar capas con efecto fadeIn y FadeOut en JQuery</a>
</body>
</html>
Creo que no tiene mucho que ver, las funciones que se llaman son fadeIn y fadeOut para mostrar y ocultar respectivamente. Como ya decía al inicio, utilizo Javascript para las llamadas de las funciones, pero se podría utilizar íntegramente JQuery.
Si queréis ver el ejemplo de como mostrar u ocultar una capa con JQuery clic aquí
¿Cómo lo hubierais hecho vosotros? Si tenéis cualquier duda comentarla y si os gusta… compartir 😉
