2.6 Efecto con fadeIn() y fadeOut().

Un efecto muy atractivo para las páginas web consiste en ver aparecer y desaparecer elementos de la página como si se fueran desvaneciendo, este efecto es muy atractivo y se puede lograr con los métodos de Jquery llamados fadeIn() y fadeOut().Los métodos fadeIn() y fadeOut() tienen dos parámetros que son los siguientes:

          fadeIn(milisengudos, callback), fadeOut(milisegundos,callback)

• Milisegundos se refiere a la cantidad de segundos que trascurrirán mientras sucede el efecto, es decir cuanto tiempo durará el efecto.
• Callback es la función que se ejecutará inmediatamente después de que el efecto termine y es un parámetro opcional.

Para poder ilustrar un poco mejor este efecto, vamos a suponer que tenemos un div con la clase “efectos”, de forma que el código HTML queda como se muestra a continuación:

<div class=”efectos”>Este div aparece y desaparece cuando colocas un cursor encima y cuando retiras el cursor</div>

y queremos que al momento de pasar el cursor por encima el div desaparezca, pero tan pronto lo retiremos el div vuelva a ser visible, entonces el código Jquery quedaría como se muestra a continuación:

$(document).ready(function(){
    //cursor sobre el elemento
    $(“.efectos”).mouseover(function(){
             $(this).fadeOut(200);
      });
//cursor fuera del elemento
     $(“.efectos”).mouseout(function(){
               $(this).fadeIn(200);
      });
});

El código consta de los siguientes componentes:

• La primera parte $(document).ready(function(){}); indica que el código Jquery se ejecutará únicamente hasta que el código HTML se haya descargado por completo.
• La segunda parte $(“.efectos”).mouseover(function(){}); nos sirve para indicar el elemento al cual se le aplicará el efecto, en este caso el div con la clase “efectos” y el evento mouseover() que sucede cuando el usuario coloca el cursor sobre el elemento.
• La tercera parte $(this).fadeOut(200); sirve para hacer referencia al div y hacer que desaparezca lentamente en un lapso de tiempo de 200 milisegundos.
• La cuarta parte $(“.efectos”).mouseout(function(){}); sirve para indicar la serie de eventos que sucederán una vez que el cursor del mouse NO este sobre el elemento div.
• La quinta parte $(this).fadeIn(200);  sirve para hacer referencia al div y hacer que este aparezca lentamente en un lapso de 200 milisegundos.