Google+ Ocultar y mostrar un div con jquery - fadeIn / fadeOut, mismo botón. - Miopiblog

domingo, 30 de diciembre de 2012

Ocultar y mostrar un div con jquery - fadeIn / fadeOut, mismo botón.

En este post, te voy a enseñar como mostrar u ocultar un elemento o div con jquery, pero en este caso, ayudándonos de los métodos fadeIn y fadeOut. Además, te voy a enseñar como hacer que estos dos métodos del framework jquery, se apliquen a un objeto o div, haciendo click en el mismo botón.

Lo primero que tienes que hacer para poder utilizar los métodos fadeIn y fadeOut de jQuery, es aprender como empezar a utilizar jQuery en un sitio web. Si ya lo sabes y has introducido jQuery en tu sitio web, podemos proceder a crear nuestro código javascript para mostrar u ocultar un div con fadeIn / fadeOut de jquery.

En primer lugar, como siempre, el fragmento de código que hace que nuestro efecto jQuery, solo funcione una vez haya cargado el DOM:
<script type="text/javascript">
$(document).ready(function() {
//Resto de código
});
</script>

A continuación, tenemos que asignar el método click a un botón, para ello, añadimos lo siguiente:
<script type="text/javascript">
$(document).ready(function() {
$('#botonpruebafade').click(function(evento) {
});
});
</script>


  1. "$('#botonpruebafade')" - con esto selecciono el botón, que se llama botonpruebafade.
  2. ".click(function(evento) {
    //Aquí llamaremos a otro método y aplicaremos el evento a un div.
     });" - con este fragmento de código, estoy indicando que el evento tiene que ocurrir al hacer click sobre el elemento seleccionado, es decir, sobre el botón.

Como verás no es nada complicado, vamos a terminar el código jQuery, solo nos queda seleccionar el div y accionar otro método de esta manera:


<script type="text/javascript">
$(document).ready(function() {
$('#botonpruebafade').click(function(evento) {
$('#divquesemuestra').fadeIn(2000);
});
});
</script>


  1. "$('#divquesemuestra')" - Seleccionamos el div llamado divquesemuestra.
  2. ".fadeIn(2000);" - aplicamos el método fadeIn a una velocidad de 2000, sobre el div.

Y lo último que nos queda para comenzar a ver este efecto jQuery en acción, es crear el botón y el div:

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

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

Aquí está el ejemplo de fadeIn:



Para hacer que el div desaparezca con efecto desvanecimiento y ayudándonos de jQuery, basta con suprimir "fadeIn" en el código anterior, por "fadeOut". El sistema es el mismo, pero con otro método que hace lo contrario. En este caso, el código jquery quedaría así:

<script type="text/javascript">
$(document).ready(function() {
$('#botonpruebafade').click(function(evento) {
$('#divquesemuestra').fadeOut(2000);
});
});
</script>

Y aquí puedes ver el ejemplo de fadeOut:


Ahora bien, esto sirve para utilizar un botón por cada evento, pero, ¿y si queremos aplicar los efectos fadeIn y fadeOut de jquery a un div con el mismo botón?, es decir, con un único botón que muestre el div cuando está oculto y lo oculte cuando este sea visible... te lo explico en un plis : ), es muy fácil.

El código jquery completo que hay que utilizar para aplicar fadeIn y fadeOut a un div con el mismo botón, es este:

<script type="text/javascript">
  $(document).ready(function(){
   $("#botonocultamuestra").click(function () {
      $("#divocultamuestra").each(function() {
        displaying = $(this).css("display");
        if(displaying == "block") {
          $(this).fadeOut('slow',function() {
           $(this).css("display","none");
          });
        } else {
          $(this).fadeIn('slow',function() {
            $(this).css("display","block");
          });
        }
      });
    });
  });
  </script>

¿parece complicado? pues no lo es, te explico brevemente en cuatro partes:


  1. "<script type="text/javascript">   $(document).ready(function(){    $("#botonocultamuestra").click(function () {" - esto ya lo conoces, te lo he explicado antes... ;)

  2. "$("#divocultamuestra").each(function() {         displaying = $(this).css("display");" - seleccionamos la propiedad display del div "botonocultamuestra" y asignamos a este valor una variable llamada "displaying".

  3. "if(displaying == "block") { $(this).fadeOut('slow',function() { $(this).css("display","none"); }); } " - si "displaying", o lo que es lo mismo, la propiedad css "display" del div, es igual al valor "block", ocultamos este con fadeOut. A continuación, seleccionamos de nuevo la propiedad "display" del css de dicho div, y aplicamos el valor "none".

  4. "else { $(this).fadeIn('slow',function() { $(this).css("display","block"); }); }" - en caso contrario, es decir; si "display" no está en "block" (por lo tanto estará en "none"), aplicamos el método fadeIn al div y el valor "block" a la propiedad "display" de css.


¿Te ha gustado? puedes verlo funcionando aquí:


Espero que te haya gustado el tutorial. Si quieres, puedes echar un vistazo y aprender a mostrar un div con el método fadeToggle de jQuery o hacerlo con el método slideToggle.

Que no se te olvide seguirme en las redes sociales o suscribirte a mi newsletter, así estarás al día sobre nuevas publicaciones en Miopiblog.

Un saludo!!!

Seguidores (seguir blog)

Me siguen en google plus: