[Snippet/Javascript] divAusblenden – Animation

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;
    }
}

[Snippet/Javascript] toggleClass ohne jQuery

Ich habe vor kurzem eine Javascript Funktion gebracht um schnell CSS KLassen zu Tauschen. In jQuery gibt es dafür die Funktion „toggleClass“. Leider stand mir in dieser Situation das Framework nicht zur Verfügung also habe ich mir die Funktion kurzerhand selber geschrieben.

Das Problem bei der Sache ist das man nicht einfach den Attribut Classname ersetzen darf da das HTML-Element vielleicht noch andere Klassen besitzt. In meiner Funktion können entweder zwei oder eine CSS-Klasse übergeben werden.
Bei zwei werden sie, falls vorhanden, getauscht, wenn noch keine von beiden vorhanden ist, wird die erste angefügt.
Bei dem Fall das nur eine Klasse übergeben wurde, wird zuerst geguckt ob die diese schon gesetzt ist. Falls ja wird sie mit nichts ersetzt andernfalls wird sie angefügt. Meine Funtion müsste sich also genauso wie das jQuery Pendant verhalten.

/**
 *
 * Wechselt die CSS-Klasse eines übergebenen Elements
 *
 * @param HTMLElement Element dessen Klasse gewechselt wird
 * @param cls1 Klasse die gesetzt oder weg gemacht wird
 * @param cls2 Klasse mit der getauscht wird. Falls dieser Parameter
 *             nicht gesetzt ist wird cls1 durch nichts ersetzt
 */

function toggleClass(elm, cls1, cls2) {
    if (!cls2) cls2 = "";
    elm.ersetzeKlasse = function (haystack, needle) {
        var re = new RegExp(haystack, "g");
        this.className = this.className.replace(haystack, needle);
    }

    if (elm.className.indexOf(cls1) > -1) elm.ersetzeKlasse(cls1, cls2);
    else if (elm.className.indexOf(cls2) > -1) elm.ersetzeKlasse(cls2, cls1);
    else elm.className += " " + cls1;
}