ejemplos del efecto FADE con JQuery

ejemplos del efecto FADE con JQuery

ejemplos del efecto FADE con JQuery

en el siguiente código te muestro un ejemplo de cómo aplicar el efecto fade in o fundido a todos los elementos div de una pagina

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeIn();

});
});
</script>
</head>
<body>
<p>Demostración efecto fadein().</p>
<button>Aparecer</button><br><br>

<div id="caja1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="caja2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="caja3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

cómo puedes observar en el ejemplo en el apartado del cuerpo o body tenemos definido un párrafo un botón que pone aparecer y tres elementos DIVS con los nombres caja 1 caja 2 y Caja3 y si miras en las propiedades CSS que tienen aplicadas,  verás que la propiedad display = none para que en principio no se visualizan.

y para que el efecto fade in funcione, en la parte del HEAD hemos puesto la programación de Java Script .

Lo primero es llamar a la librería de jQuery. después en el método ready() del documento le indicamos que esté alerta del evento Click del botón que hemos definido antes, y para finalizar le indicamos que aplique el efecto fade in a todos los DIVS

en la funcion FadeIn puedes utilizar los parámetros slow o fast para indicar la velocidad a la que quieres que se ejecute el efecto

  $("#caja2").fadeIn("slow");

o también como parámetro a la funcion FadeIn puedes expresar el número de segundos utilizando milisegundos

 

  $("#caja2").fadeIn(3000);

 

o puedes conseguir el efecto contrario utilizando el método fade out

 

  $("#caja2").fadeOut(3000);

 

Y si lo que estás buscando es un efecto combinado es decir una especie de interruptor que visualice u  oculte los elementos , utiliza el método fadeToggle()

 

  $("#caja2").fadeToggle();