Google+ Mostrar / Ocultar un elemento o div con jQuery - FadeToggle - Miopiblog

viernes, 28 de diciembre de 2012

Mostrar / Ocultar un elemento o div con jQuery - FadeToggle

Se puede ocultar o mostrar un div con jQuery de muchas maneras, pero en esta ocasión voy a realizar dicha acción gracias a uno de los métodos fading de jquery: fadeToggle. Pues bien, si ya has completado los pasos para incluir jQuery en tu sitio web, sólo queda empezar a crear el código javascript, para mostrar u ocultar un div, ayudándonos del método fadeToggle de jQuery.
Comenzamos por crear el evento inicial, que hará que tu código solo entre en funcionamiento cuando el DOM haya finalizado de cargar. Creamos lo siguiente:
<script type="text/javascript">
$(document).ready(function() { 
// Aquí va el resto del código que solo se ejecutará cuando la página haya cargado.
}); 
</script>

Seguidamente, vamos a complementar este código, con un fragmento de javascript que hará que al hacer click sobre un botón, el div o elemento se muestre u oculte respectivamente, según cual sea su estado. Simplemente, crearé un manejador de evento que invoca al método click sobre un div. El método click, a su vez, sirve para aplicar el método fadeToggle, sobre este mismo div. Procedemos:


<script type="text/javascript">
$(document).ready(function(){
  $("#boton").click(function(){
    $("#div1").fadeToggle(3000);
  });
});
</script>

Y por último, debes crear un botón y un objeto al que aplicar nuestro efecto de mostrar / ocultar:

<input type="button" id="boton" value="Mostrar / Ocultar" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div id="div1" style="background:#000000;display:none;width:100px;height:100px;"></div>


Aquí puedes ver este ejemplo funcionando:



¿Te gusta? Si no te gusta este método para ocultar y mostrar un div u otro elemento html con jQuery, o quieres aprender más, puedes echar un vistazo a un post en el que te explico cómo mostrar y ocultar un div con slideToggle de jQuery.

Por cierto, no te olvides de seguirme en la redes sociales : ) y un saludo!!!

Seguidores (seguir blog)

Me siguen en google plus: