Замена .animate()

[(Sandr)]

Всем привет. Подскажите, как сделать подобие .animate(); только на чистом js?
А именно, меня интересует плавное скрытие и показ элемента: $(id).animate({height: 'show'}, 200);

Подскажите, как такое сделать, а то даж не знаю с чего начать

[Sweet]

Лучше всего начать с поиска!

[(Sandr)]

Sweet,
Я так понимаю, нужно просто плавно изменять высоту/ширину элемента и всё? Если да, то подскажи, как получить доступ к высоте и ширине элемента?

[(Sandr)]

Сам нашёл)

[(Sandr)]

Посмотрите этот код пжл, скажите, что в нём не так?

<script>
function myf(div)
{
	var elem = document.getElementById(div);
	var show = document.getElementById('di');
	show.innerHTML = elem.offsetHeight;
	setTimeout(function() {
	elem.style.height = (elem.offsetHeight - 15) + 'px';
	
	
	show.innerHTML = elem.offsetHeight;
	if(elem.offsetHeight > 0)
	{
		myf(div);
	}
	},50);
}
</script>
<a href="javascript:void(0)" onclick="myf('dii')">Запуск</a>
<div id="di"></div><hr>
<div id="dii" style="background-color: blue">
 111111111111111111111111111111111111111111111111111111111111111111<br>
 1111111 1111111111111111111 11111111111111111 111111111 11111111111111<br>
 1111111111111111111 111111111111111111111 11111111111111111111111111<br>
 111111111111111111111111111111111111111111111111111111111111 111111<br>
 11111111111111111111111111111111111111111111111111 11 11111111111111<br>
 </div>

[(Sandr)]

Блин, код сдесь не запускается почему-то но в браузере работает. Но не совсем так, как нужно.. сама высота дива уменьшается, это можно посмотреть по уменьшению столбика с синим цветом, но вот единички не исчезают.

[trikadin]

Поставьте overflow: hidden, и будет вам счастье.

[(Sandr)]

Спасибо)

[(Sandr)]

Возник ещё один вопрос. Если длина дива не уменьшается, а увеличивается, то нужно прописать в условии, чтобы код корректно исполнялся?

function myf(div)
{
    var elem = document.getElementById(div);
    var show = document.getElementById('di');
    show.innerHTML = elem.offsetHeight;
    setTimeout(function() {
    elem.style.height = (elem.offsetHeight + 1) + 'px';
     
     
    show.innerHTML = elem.offsetHeight;
    if(elem.offsetHeight > 0) // что здесь прописать?
    {
        myf(div);
    }
    },50);
}

Конечно можно прописать что-то в роде if(elem.offsetHeight < x)
Где x - длина дива в "развёрнутом" состоянии. Но вот как тогда узнать эту длину?

[monolithed]

Для понимания, как-то так (стоит отметить, что это не правильные подходы):

<script type="text/javascript">
//show
window.onload = function() {
    var i = 0;
    (function(){
        if(++i <= 100) {
           document.getElementsByTagName('div')[0].style.height = i+'px';
           setTimeout(arguments.callee, 10);
        }
        else {
            alert('finished');
        }
    })();
};
</script>

<style type="text/css">
div {
    background: blue;
    position: absolute;
    width: 100px;
}
</style>

<div></div>

<script type="text/javascript">
//toggle
window.onload = function() {
    var elem = document.getElementById('div'), i = 0, j = 0, s = 100;   
    document.getElementById('a').onclick = function() {
        if(++i <= s) {
            elem.style.height = i +'px';
            j = i;
            if(j >= s) return false;
        }
        else {
            elem.style.height = --j +'px';
            if(j <= 0) {
                i = 0;
                return false;
            }
        }
        window.setTimeout(arguments.callee, 1);
        return false;
    };
};
</script>

<a href="#" id="a">click<a/>
<div id="div" style="background: #0095FF; overflow: hidden; width: 200px; height: 0px;"></div>

как правильно, написано тут