Показать сообщение отдельно
  #1 (permalink)  
Старый 17.12.2009, 17:03
Интересующийся
Отправить личное сообщение для paratrooper1981 Посмотреть профиль Найти все сообщения от paratrooper1981
 
Регистрация: 10.09.2009
Сообщений: 20

Как сделать нормальное анимированное скрытие элемента
Помогите пожалуйста написать грамотный скрипт скрытия элемента со страницы.



var time_closepixel=50; //время в мс
var hstep=1; //количество пикселей, на которые элемент будет уменьшаться при одном выполнении функции closeitem
function closeitem(div_name, heightEl)
{
var d_apply=document.getElementById(div_name);

if (heightEl=='begin')
{
var heightEl2=d_apply.offsetHeight;
d_apply.style.height=heightEl2+'px';
var heightEl3=heightEl2-hstep;
closeitem(div_name, i, heightEl3);
}
else if (heightEl<=0)
{
removeitem(div_name); //функция удаляет элемент из страницы (здесь эту функцию не привожу)
}
else
{
d_apply.style.height=heightEl+'px';
var heightEl2=heightEl-hstep;
setTimeout(function(){closeitem(div_name, i, heightEl2)}, time_closepixel);
}
}


Для скрытия элемента <div id="nnn" style="overflow:hidden; width:100%;'> я вызываю функцию closeitem("nnn",'begin');

Анимированный эффект в браузерах IE и Opera при этом получается говённый, большие задержки и время выполнения эффекта зависти от количества элементов на странице, к которым применяется эффект..

Как я уже догадался, функция рекурсивно ссылается саму на себя, что вызывает переполнение памяти. Замена на setInterval() здесь тоже наверно не подойдёт, т.к. причина в самом стилей выполнения анимации. Не знаю, как по другому выполняются данные функции, чтобы не вызывать переполнение памяти. По крайней мере на сайтах видел нормальную работающую анимацию без всяких задержек и глюков и знаю, что можно сделать более качественно. Помогите создать грамотный анимированный эффект.

Последний раз редактировалось paratrooper1981, 17.12.2009 в 17:06.
Ответить с цитированием