jQuery, манипуляции с DOM и трансформации CSS3

Делая по работе слайдер изображений с эффектом Кена Бернса столкнулся с довольно странным поведением трансформаций CSS3.

Для создания эффекта я использовал 2 трансформации – изменение прозрачности (opacity от 0 до 1) и масштабирование (scale от 1 до 1.08, т.е. на 8%). Обе трансформации применяются одновременно, одним css-классом, только «наезд картинки» примерно в 3 раза дольше изменения прозрачности.

Но поскольку у меня несколько картинок, и все они должны показываться по кругу до бесконечности, то текущий слайд надо передвигать вверх по DOM внутри контейнера с помощью JavaScript.

Вот тут и началось странное поведение:

если я назначаю нужной картинке css-класс для трансформаций сразу после того, как передвинул её наверх внутри контейнера, то на экране отображается только конечное положение трансформации – то есть картинка полностью видима и уже увеличена.

Вполне возможно, что в момент присвоения css-класса ещё не закончился перенос кода внутри DOM? Но попытка использовать функцию jQuery each() – для доступа к элементу ГАРАНТИРОВАННО после того, как элемент встроен в DOM – положительного эффекта не дала. Иными словами, код

$(currentSlide).appendTo('#slider-image-container').each(function() {

            $(currentSlide).addClass(‘startTransformation’);

});

ничем не помог.


Решение

Решить проблему удалось обходным путём – добавив промежуточный таймер с небольшим значением, в 50 мс:

var internalTimer;

$(currentSlide).appendTo('#slider-image-container').each(function() {

            internalTimer = setTimeout(afterDelay, 50);

});

function afterDelay() {

            $(currentSlide).addClass(‘startTransformation’);

}

Сразу всё заработало – причём во всех браузерах.

Причину такого поведения браузеров объяснить не могу (впрочем, допускаю, что где-то чего-то не дочитал).