Ein- und Ausblenden mit JavaScript und CSS

Das Erstellen von Ein- und Ausblendeffekten für HTML-Elemente kann die verbessern visuelle Attraktivität von Webanwendungen. Die Implementierung dieser Effekte kann jedoch manchmal eine Herausforderung sein, insbesondere wenn die Einblendfunktion nicht ordnungsgemäß funktioniert.

In einer früheren Implementierung erhöhte die Einblendfunktion die Deckkraft des Elements nicht wie erwartet. Stattdessen blieb er bei 0,1 hängen. Um dieses Problem zu lösen, bieten wir eine effizientere Methode an:

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity='   op * 100   ")";
        op  = op * 0.1;
    }, 10);
}

Diese Funktion beginnt mit einer anfänglichen Deckkraft von 0,1 und erhöht sie schrittweise, bis sie 1,0 erreicht, was zu einem sanften Einblendeffekt führt.

Für das Ausblenden ersetzen wir den obigen Code with:

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
Diese Funktion verringert kontinuierlich die Deckkraft, bis sie 0,1 erreicht, und blendet dann das Element aus, um den gewünschten Ausblendeffekt zu erzeugen.
Denken Sie daran, dass Sie unbedingt vermeiden müssen, Zeichenfolgen als Argumente für setInterval oder zu verwenden setTimeout aufgrund ihrer potenziellen Sicherheitsrisiken.