Как сделать нормальное анимированное скрытие элемента
 

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



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() здесь тоже наверно не подойдёт, т.к. причина в самом стилей выполнения анимации. Не знаю, как по другому выполняются данные функции, чтобы не вызывать переполнение памяти. По крайней мере на сайтах видел нормальную работающую анимацию без всяких задержек и глюков и знаю, что можно сделать более качественно. Помогите создать грамотный анимированный эффект.

Я знал, что на этом сайте найдутся статьи на все случаи жизни :victory:

почти в правильном направлении. а тебе не зря указали почитать

function closeitem(div_name){
  var d_apply=document.getElementById(div_name),h=d.offsetHeight-hstep;
  if (h>0) {
    d_apply.style.height = h+'px';
    setTimeout(function(){closeitem(div_name)},time_closepixel)
    }
    else removeitem(div_name);
  }

closeitem("nnn");

Я статью только что прочитал. Очень полезная статья и она мне очень поможет продвинуться в изучении анимации движения. Спасибо автору.

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

в такие подробности не в давался, но вроде как ток заканчивается работа функции setTimeout, то из памяти она удаляется. если бы было как Вы говорите, то никакой браузер не выдержал бы хорошие анимации в течение 1 часа... да какого там часа, 15-20 минут и браузер зажрал бы всю оперативку
Вот если бы вы делали var id = setTimeout(...) то да оперативка бы жралась, но тоже не уверен, сборщик мусора все равно должен увидеть что переменные не используются...

PeaceCoder, я буду дорабатывать функцию и делать её универсальной. Пока код пишу не очень профессиональный, надеюсь это временное явление. В конце что-то похожее на библиотеку должно получиться.

Там нет рекурсий.

а где вы нашли рекурсию?
setTimeout не создает рекурсии
к моменту запуска следующего вызова ф-ции, предыдущий уже полностью отработает

У меня так и было :( В трее вылезло сообщение о нехватке памяти. Только тогда понял, что рекурсивно ссылаться здесь не нужно, только не знаю как по другому сделать.