HTML+CSS+JavaScript

Приветствую, коллеги!

Хочу сделать примитивную фотогалерею с маленькими превьюшками и одной большой картинкой. При клике на превью, большое изображение должно уменьшить прозрачность, поменять src и обратно увеличить прозрачность к первоначальной.

При клике вызывается вот такой код:

var newImage = $(this).attr('src'); bigImage.fadeOut().attr('src', newImage).fadeIn();

Проблема в том, что jQuery не дожидается окончания fadeOut, а сразу меняет src. При чем безразлично, где мы поставим команду на изменение изображения: в начале, в середине или в конце. Результат один и тот же. Сначала меняется src, а потом воспроизводятся fadeIn и fadeOut.

На офицальном сайте нашел команду delay(), но результат то же.

Как заставить jQuery выполнять команды последовательно?

Заранее спасибо всем ответившим. Также буду премного благодарен за любые ссылки, раскрывающие этот вопрос.

у fadeOut/fadeIn есть два аргумента : скорость, и функция выполняемая по завершению анимации
bigImage.fadeOut('normal',function(){
$(this).attr('src',newImage).fadeIn();
})

Большущее спасибо! Вы мне очень помогли!