Почему события происходят не по порядку?

Question

[Tenebrius]

Есть необходимость изменить ширину примерно сотни объектов на странице. Это занимает пару секунд.
Хочется на эту пару секунд затемнить экран, чтобы показать, что идет процесс.

Делаю примерно так:

$("#dark").show();
$(".item").each(function(){ $(this).width(number)});
$("#dark").hide();

Проблема в том, что затемнения не происходит. Как это исправить?

Comments

[Tenebrius]

Через отладчик все ок. Если по шагам, то появляется затемнение, меняются стили у нужных элементов, потом затемнение исчезает..

Answer 1

[Филипп Фастер]

События анимации происходят сразу же, не ожидая других событий. Делайте примерно так (с вызовом колбека в каждой из асинхронных функций):

$("#dark").show(0,function() {
       $(".item").each(function(){ $(this).width(number)});
       $("#dark").hide();
});

Должно работать.

Answer 2

[Виталий]

$('#dark').show();
window.setTimeout(function(){
// heavy operation
// ...
$('#dark').hide();
});