Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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) приходится терпеливо ждать). Почему так происходит и как с этим справиться?
Ответить с цитированием
  #2 (permalink)  
Старый 01.03.2012, 14:02
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

var нужно к переменным, да. у вас они не сбрасываются.
Ответить с цитированием
  #3 (permalink)  
Старый 01.03.2012, 21:45
Профессор
Отправить личное сообщение для demoniqus Посмотреть профиль Найти все сообщения от demoniqus
 
Регистрация: 28.05.2008
Сообщений: 182

про которые переменные вы говорите? Если про Т и i, то они при каждой итерации функции MoveDIV должны принудительно ставиться в ноль - если бы этого не происходило, то DIVы двигались хаотично. Объявление их через var все равно ничего не поменяло - последний "падающий" DIV (с индексом 0) значительно тормозит по сравнению с самым первым...
переменная iter до остановки таймера и не должна сбрасываться.
Единственный пока выход - это существенно сократить время в setInterval - тогда визуально не успеваешь заметить разницу... но из-за этого теряется эффект "выпадания".
И еще один момент - серьезные тормоза особенно касаются DIVов с индексами от 0 до 2 независимо от общего числа таких контейнеров... я увеличил их число с 5 до 20 штук для проверки...
Ответить с цитированием
  #4 (permalink)  
Старый 02.03.2012, 09:58
Профессор
Отправить личное сообщение для demoniqus Посмотреть профиль Найти все сообщения от demoniqus
 
Регистрация: 28.05.2008
Сообщений: 182

Ладно. Вопрос решил сам.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с созданием простого скрипта Sashok) Элементы интерфейса 11 24.02.2012 15:50
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Помогите, не могу никак понять pav-pas ExtJS 2 17.03.2010 10:57
Помогите чайнику. Два одинаковых скрипта на странице. VASH132 Общие вопросы Javascript 6 28.01.2010 15:42
Помогите разобраться с логикой поведения скрипта MarkupDeveloper jQuery 3 21.06.2008 18:04