Fading elements

Hacer una animación simple es muy fácil con jQuery. Uno de los efectos que admite de forma inmediata es hacer que un elemento entre (fade in) y desaparezca (fade out) de la visibilidad. Aquí hay un ejemplo simple, donde nos hacemos aparecer un cuadro que de otro modo estaría oculto, usando el método fadeIn ():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
	<b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
	$("#divTestArea1").fadeIn();
}
</script>

Puedes hacer aparecer muchos elementos diferentes, como divs, spans o enlaces. El método fadeIn () puede tomar hasta tres parámetros. El primero le permite especificar la duración del efecto en milisegundos, o "rápido" o "lento", que es lo mismo que especificar 200 o 600 milisegundos. Aquí hay un ejemplo en uso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
	$("#divTestArea21").fadeIn("fast");
	$("#divTestArea22").fadeIn("slow");
	$("#divTestArea23").fadeIn(2000);
}
</script>

No te preocupes por todo el HTML, está ahí para que puedas ver la diferencia entre las duraciones de aparecer (o desaparecer) un objeto. Ahora, el segundo parámetro puede ser el nombre de una función de aceleración (la que no usaremos en este tutorial) o una función de devolución de llamada que puedes proporcionar, que se llamará una vez que finalice el efecto. Aquí hay un ejemplo de eso, combinado con el uso del método fadeOut (), que obviamente tiene el efecto inverso de fadeIn ():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea3").fadeIn(2000, function()
	{
		$("#divTestArea3").fadeOut(3000);
	});
});
</script>

There may be situations where you want to fade an element in our out depending on its current state. You could of course check if it is visible or not and then call either fadeIn() or fadeOut(), but the nice jQuery developers have supplied us with a specific method for toggling an element, called fadeToggle(). It takes the same parameters as fadeIn() and fadeOut(), so it's very easy to use. Here's a little example:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
	$("#divTestArea4").fadeToggle("slow");	
}
</script>

Y así como de fácil es utilizar los efectos de desvanecimiento de jQuery.