Здравствуйте.
Пытаюсь придумать алгоритм плавной смены фона div-элемента. Есть div-элемент, которому назначается фоновая картинка. По прошествии определенного времени надо сменить фон другой картинкой.
Смена фона внешне должна происходить следующим образом: затухание блока (блок становится постепенно черным), далее проявление фона с уже измененным фоном. То есть не просто плавное "опрозрачивание" одного дива, и проявление другого.
То что придумал я не работает должным образом:
<div id="wrapper"><div id="content"></div></div>
Wrapper назначен черный фон, content присваивается конкретная картинка для фона. Соответственно изменяю непрозрачность (opacity) блока content до нуля, изменяю фон content и повышаю непрозрачность до 100. (от 0 до 1 в w3c-совместимых браузерах).
За затухание отвечает функция fade, которая в зависимости от флага показано изображение или скрыто повышает или понижает прозрачность блока:
function fade ( el, maxVal, minVal, frames ) {
var vpf = Math.ceil( ( maxVal - minVal ) / frames ); // valuePerFrame
var tpf = Math.ceil( 1000 / el.fps ); // timePerFrame
if ( el._fadeIn ) { // Если объект показан на экране, то надо сделать fadeOut (скрыть)
for ( var i = 1; i <= frames; i++ ) {
(function() {
var opacityValue = maxVal - i * vpf;
var timeInterval = i * tpf;
setTimeout ( function () { setOpacity ( el, opacityValue ); }, timeInterval );
})();}
el._fadeIn = false;
}
else { // Иначе делаем fadeIn, показываем объект
for ( var i = 1; i <= frames; i++ ) {
(function() {
var opacityValue = minVal + i * vpf;
var timeInterval = i * tpf;
setTimeout ( function () { setOpacity ( el, opacityValue ); }, timeInterval );
})();}
el._fadeIn = true;
}
}
Функция, в которой собран механизм содержит в себе нечто вроде:
...
fade ( el, 100, 0, halfFrames );
changeBg(); // изменение фона блока
setTimeout ( function () { fade ( el, 100, 0, halfFrames ); }, el.duration / 2 );
el.currentPos += 1;
...
Если не использовать setTimeout для вывода из черного состояния, то функция fadeIn (2-ая по порядку) перебивает, как я понимаю, первую - fadeOut (1-ая по порядку). Если использовать setTimeout ..., то картинка фона меняется раньше, чем фон затухает.
Вопросов несколько: как заставить выполняться нужные мне строки кода по цепочке - до тех пор пока не выполнится предыдущий метод, не запускается следующий? Может стоит как-то изменить способ изменения прозрачности (изменять не циклом for и устанавливая таймауты, но по-другому не представляю, как сделать постепенное изменение) или в принципе нужно использовать другой алгоритм?
