Как сделать нормальное анимированное скрытие элемента
Помогите пожалуйста написать грамотный скрипт скрытия элемента со страницы.
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.
|