Enviando funciones callback

Los tres métodos que estamos viendo para hacer fading, como cualquiera de los existentes en jQuery, permiten el envío de un parámetro como función callback. Con este código conseguimos que se ejecute un fadeIn() después de un fadeOut(), para conseguir un efecto de parpadeo, en el que primero se oculta el elemento y cuando desaparece se vuelve a mostrar restaurando su opacidad

$("#milista").fadeOut(function(){

$(this).fadeIn();

});

Como vemos, se está indicando una función callback y dentro de la misma, this es una referencia al objeto jQuery que recibió el anterior método. Osea, con $("#milista").fadeOut() se hace un efecto de fundido para que desaparezca el elemento "#milista". Luego la función callback se ejecutará cuando ese elemento termine de desaparecer. Dentro de esa función callback se accede a $(this) para tener una referencia a "#milista" y sobre ese elemento invocamos al método fadeIn() para hacer que aparezca de nuevo la lista. 

Ahora vamos a mostrar otro ejemplo de callback un poco más adelantado, en el que se encadenan varias funciones callback, que se ejecutarían una detrás de la otra.

var opacidad_deseada = $("#selopacidad").attr("value");

$("#e1").fadeTo(500, opacidad_deseada, function(){

$("#e2").fadeTo(500, opacidad_deseada, function(){

$("#e3").fadeTo(500, opacidad_deseada);

});

});

En este código hacemos un efecto de fadeTo() sobre cada uno de los elemento de la lista. Para definir qué opacidad queremos aplicar a esos elementos utilizamos de nuevo el campo SELECT que habíamos visto anteriormente en este artículo. Pero en esta ocasión utilizamos una manera distinta de acceder al valor de opacidad que hay seleccionado, a través del método attr() de jQuery. 

En el código anterior primero se ejecuta el cambio de opacidad en el primer elemento, luego en el segundo y por último en el tercero, siempre hacia la misma "opacidad_deseada" que se había recuperado en el SELECT.