Si eres un amante del diseño web y te interesa conocer las últimas tendencias en tecnología de animación, entonces este artículo es para ti. En esta ocasión hablaremos sobre los efectos de desvanecimiento de jQuery y cómo pueden ser utilizados para añadir sutilidad y elegancia a tus proyectos web. Así que prepárate para descubrir cómo los efectos de desvanecimiento de jQuery pueden ser la mejor herramienta de tu arsenal de diseño. ¡Bienvenidos a TIEngranaje!
jQuery tiene varios métodos que se pueden usar para ajustar el opacidad de elementos. Estos métodos son solo algunos de la variedad de métodos que se pueden usar para crear efectos de animación.
El uso de jQuery entre los diseñadores web sigue creciendo en popularidad. Con respecto a las técnicas de desvanecimiento, los métodos típicos utilizados son fadeIn(), fadeOut(), fadeTo()y fadeToggle().
Sintaxis
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).fadeToggle(speed,easing,callback)| Parámetro | Descripción |
|---|---|
speed |
Valores opcionales en milisegundos, «lento», «normal» y «rápido». |
opacity |
Atributo obligatorio que especifica la opacidad a la que se desvanece, entre 0,00 y 1,00. |
easing |
Indica qué función de aceleración (swing/lineal) usar para la transición. |
callback |
Una función opcional para ejecutar después de que se complete el método. |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-fading-effects-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="fadeIn.png" />
<img id="img2" src="fadeOut.png" />
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Fundido de entrada / fundido de salida
En el siguiente ejemplo, utilizaremos el click evento para desencadenar el fadeIn() y fadeOut() método en el elemento div adyacente a las imágenes.
<script type="text/javascript">
$("#img1").click(function(){
$("div").fadeOut();
});
$("#img2").click(function(){
$("div").fadeIn();
});
</script> Desvanecerse hacia
En el siguiente ejemplo, utilizaremos el click evento para desencadenar el fadeTo() método para aplicar este efecto de desvanecimiento al elemento div adyacente.
<script type="text/javascript">
$("#img1").click(function(){
$("div").fadeTo("normal", 0.20);
});
</script> FadeToggle
El fadeToggle() método anima la opacidad de la elementos emparejados. Cuando se activa en un elemento, la propiedad de estilo de visualización del elemento se establece en ninguno una vez que la opacidad alcanza 0.
<script type="text/javascript">
$("#img1").click(function(){
$("div").fadeToggle("slow", "linear");
});
</script> 