Como tercera entrega vamos a ver un par de efectos piolas en JQuery. Es muy sencillo como esta API trabaja con efectos multibrowser y su aplicacion es sumamente Friendly.

En la entrega de hoy vemos agregado de classes dinamicamente.

<style>
.class1 {
background: #fff;
color: #000;
}
.class2 {
background: #ff0033;
color: #fff;
}
.class3 {
background: #000;
color: #fff;
}
</style>
<input type="button" value="Click Aca" onclick="showDiv();">
<input type="button" value="Y Despues Click Aca" onclick="hideDiv();">

<script>
function showDiv() {
$("#myclass").addClass("class1").fadeIn("slow", function() {$("#myclass").addClass("class2")});

}

function hideDiv() {
$("#myclass").addClass("class3").fadeOut("slow");
$("#myclass").removeClass("class1").removeClass("class2").removeClass("class3");
}

</script>

Veamos un poco el codigo para estos efectos, primero el CSS que define las 3 classes que vamos a usar

<style>
.class1 {
  background: #fff;
  color: #000;
}
.class2 {
  background: #ff0033;
  color: #fff;
}
.class3 {
  background: #000;
  color: #fff;
}
</style>

Ahora el javascript que va a permitir hacer las animaciones una y otra vez. JQuery tiene una virtud que puede ser facilmente convertida en una desventaja horrible. Cada metodo retorna el mismo objeto, por lo cual podemos concatenar metodos realizando acciones una tras otra sin cambiar de linea. Aca vemos un ejemplo sencillo con 2 y 3 concatenaciones. No hay que abusar de esto ya que seria facilmente se convertiria en OLPL. (One Line Programming Language).

<script>
function showDiv() {
  $("#myclass").addClass("class1").fadeIn("slow", function() {$("#myclass").addClass("class2")});
}

function hideDiv() {  $("#myclass").addClass("class3").fadeOut("slow");
$("#myclass").removeClass("class1").removeClass("class2").removeClass("class3");
}

Y para finalizar los 2 botones que tendran como evento el llamar a nuestras funciones y el html con el div para mostrar y ocultar.

<input type="button" value="Click Aca" onclick="showDiv();">
<input type="button" value="Y Despues Click Aca" onclick="hideDiv();">
<div id="myclass" style="display:none">Some content here</div>

JQuery es hoy un standard para el desarrollo de mis aplicaciones, su versatilidad, tamanio y performance hicieron que me decida sobre esta API ante otras.