Animationen erstellen mit Javascript

Kleine Animation, wie das verschwinden eines div-Blockes, kann man in Javascript sehr einfach mit der Funktion setTimeout() erstellen.

Die Logik ist dabei immer dieselbe:

Für jeden Bewegungsframe wird mittels der  setTimeout-Funktion zu einem bestimmten Zeitpunkt die Größe oder Posiition des Objektes verändert, so dass am Ende aneinandergereiht eine Animation herauskommt für das menschliche Auge.

Bsp:
[inline]

[script type=“text/javascript“]//

[/script]
[/inline]

Code:

<div id="removeable"  onclick="js:removeObject('removeable');">Click me</div>

<script type="text/javascript">

        var duration = 10; //seconds
        var running = 0
        var element;

        function SetHeight(height) {

            element.style.height  = height + "px";
            //console.log(height);
        }
        function hideObject() {
            //console.log("hide");
            element.style.display  = 'none';
        }

        function removeObject(id) {
            if(running) return
            running = true;

            element = document.getElementById(id);
            height = element.offsetHeight;
            var until = height;
            var i;
            for (i = 0; i <= until; i += 1) {
                height =  height - 1;
                setTimeout("SetHeight(" + height + ")", i * duration);
            }
            i += 1
            setTimeout("hideObject();", i * duration);
        }

</script>