Schlagwort: dhtml

Hier ein kleines Beispiel wie „Animation“ ohne ein Javascript Framework realisieren werden kann.
In diesem Fall wird ein Div nach 3 Sekunden immer kleiner und dann ausgeblendet.
Das ganze passiert rekursiv.

// Meldung nach 3 Sekunden wieder ausblenden
var meldung = document.getElementById("meldung");
if (meldung) {
    window.setTimeout(function () {
        divAusblenden("meldung", meldung.offsetWidth - 10, meldung.offsetHeight - 10);
    }, 3000);
}

// Meldungen langsam kleiner werden lassen und dann ausblenden

function divAusblenden(id, breite, hoehe) {
    var reentrant = 0;
    if (!reentrant) {
        reentrant = 1;
        var move = 0,
            element = document.getElementById(id);
        if (hoehe > 0) {
            hoehe -= 1;
            move++;
        }
        if (breite > 0) {
            breite -= 1;
            move++;
        }
        element.style.visibility = (breite > 0 && hoehe > 0) ? 'visible' : 'hidden';
        if (move) {
            element.style.height = hoehe + 'px';
            element.style.width = breite + 'px';
            if (hoehe >= 1 && hoehe <= 12) {
                element.style.fontSize = hoehe - 1 + 'px';
            }
            window.setTimeout(function () {
                divAusblenden(id, breite, hoehe);
            }, 30);
        }
        reentrant = 0;
    }
}