Показать сообщение отдельно
  #1 (permalink)  
Старый 01.03.2012, 13:46
Профессор
Отправить личное сообщение для demoniqus Посмотреть профиль Найти все сообщения от demoniqus
 
Регистрация: 28.05.2008
Сообщений: 182

Помогите понять поведение скрипта
есть функция, которая размещает на странице контейнер DIV. В этом контейнере находятся несколько вложенных контейнеров, позиционированных относительно родителя и приподнятых вверх, чтобы пользователь их изначально не видел на странице:
function MovingDIV() {
rslt = '<div style="position: relative; top: 0px; border-color: gray; border-style: solid; border-width: 1px;">';
rslt += '<div style="position: relative; background-color: #ccccff; top: -480px; z-index: -100; " id="moving0">';
rslt += '<table><tr><td>Param0</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #ffcccc; top: -480px; z-index: -101;" id="moving1">';
rslt += '<table><tr><td>Param1</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #ccffcc; top: -480px; z-index: -102;" id="moving2">';
rslt += '<table><tr><td>Param2</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #fccccf; top: -480px; z-index: -103;" id="moving3">';
rslt += '<table><tr><td>Param3</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #cfccfc; top: -480px; z-index: -104;" id="moving4">';
rslt += '<table><tr><td>Param4</td></tr></table>';
rslt += '</div>';
rslt += '</div>'
document.getElementById('mainTD').innerHTML = rslt;
document.getElementById('moving0').style.top = "-240px"
timer1 = setInterval('MoveDIV(5)', 50);
}

Есть вторая функция, задача которой отобразить вложенные DIV'ы (они как бы падают сверху страницы на положенное им место, причем не все вместе и сразу, а один за другим):
timer1;
iter = 0;
function MoveDIV (itemcount) {
i = 0;
T = 0;
while (i < itemcount) {
	if (iter < i) {
		T = document.getElementById('moving' + i).offsetTop;
		}
	else {
		T = document.getElementById('moving' + i).offsetTop + 10 ;
		}
	if (T > 0) {
		T = 0;		
		}
	document.getElementById('moving' + i).style.top = T + "px";
	i++
	}
iter++;
if (iter == (itemcount - 1 + 24)) {
	clearInterval(timer1);
	}
}

В принципе все работает (правда, почему-то в обратном порядке, ну это мелочи)... вопрос в другом - каждый следующий контейнер опускается визуально медленнее предыдущего - в итоге первый опускается быстро, а последнего (с индексом 0) приходится терпеливо ждать). Почему так происходит и как с этим справиться?
Ответить с цитированием