¿Asignando elementos algo rotos en javascript?

http://jsfiddle.net/aRV7q/1/

function multierror(elements, messages){ while(elements.length > 0){ box = $(elements.pop()); errTab = $('#error'); errTab.fadeOut(10, function(){ box.css('border', '1px solid networking'); errTab.html(messages.pop()); }).fadeIn(10); errTab.fadeOut(5000, function(){ box.css('border', '1px solid #cccccc'); errTab.html('&nbsp'); }).fadeIn(1000); } } 

Esta es la function que estoy tratando de ejecutar, debería desvanecer algunos posts en $ ('# error') y resaltar algunos cuadros de input que tengo en un formulario. Los posts están en la variable de posts y el # nombre de los cuadros de input están en la variable de elementos.

Pero lo que sucede es que el post aparece y se muestra correctamente, pero el elemento seleccionado para resaltar siempre es el mismo, aunque un elemento siempre aparece cuando el ciclo while itera, así que supongo que una vez configurado, el cuadro de la variable nunca se reasigna, pero no veo ninguna razón por qué.

¿Alguna idea?

Eso sucede porque fadeOut tiene una callback asíncrona, que se llama cuando while loop ya pasó al último elemento de la matriz.

Una posible solución es agregar un cierre que mantendrá cada valor de box para futuras devoluciones de llamada:

 while (elements.length > 0) { (function(box) { var errTab = $('#error'); errTab.fadeOut(10, function() { box.css('border', '1px solid networking'); errTab.html(messages.pop()); }).fadeIn(10); errTab.fadeOut(5000, function() { box.css('border', '1px solid #cccccc'); errTab.html('&nbsp'); }).fadeIn(1000); })($(elements.pop())); } 

DEMO: http://jsfiddle.net/aRV7q/5/