Ein- und Ausblenden in reinem JavaScript

68656
Hakan

Ich beschloss, meine eigene Einblendfunktion zu erstellen, da dies alles ist, was ich auf meiner Seite brauche.

Bitte kommentieren Sie Dinge, die ich besser machen kann.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>

<body>
        <div>
        <span id="fade_in">Fade In</span> | 
        <span id="fade_out">Fade Out</span></div>
        <div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
    </div>
</div>

<script type="text/javascript">
// global varibles
var done = true,
    fading_div = document.getElementById('fading_div'),
    fade_in_button = document.getElementById('fade_in'),
    fade_out_button = document.getElementById('fade_out');

function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
    if (fade_in_or_fade_out == 'in' && opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (fade_in_or_fade_out == 'in' && opacity_value == 100) {
        done = true;
    }
    if (fade_in_or_fade_out == 'out' && opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

// fade in button
fade_in_button.onclick = function () {
    if (done && fading_div.style.opacity !== '1') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout("function_opacity(" + i + ",'in')", i * 5);
        }
    }
};

// fade out button
fade_out_button.onclick = function () {
    if (done && fading_div.style.opacity !== '0') {
        done = false;
        for (var i = 100; i >= 1; i--) {
            setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
        }
    }
};
alert (test);
</script>
</body>
</html>
Antworten
13
Sie könnten das alles überspringen und css-Übergänge für Sie erledigen lassen. http://css3.bradshawenterprises.com/transitions/ Dagg vor 8 Jahren 6
GGG, vielleicht ist es eine gute Idee. 2012 werden die Browser häufiger aktualisiert. Hakan vor 8 Jahren 0
Ja, ich denke es ist gut für so etwas wie ein Fade (progressive Verbesserung). Leute, deren Browser nicht unterstützen, sehen das Verblassen nicht, aber das Ding wird immer noch angezeigt bzw. verschwindet, so dass der visuelle Effekt einfach verpasst wird und Sie 50 oder 60 Zeilen Javascript speichern können. Dagg vor 8 Jahren 1

2 Antworten auf die Frage

6
palacsint

Nur ein paar generische Hinweise zum JavaScript-Code: Ich würde eine setOpacityFunktion extrahieren und auch eine fadeOutund eine fadeInFunktion erstellen .

function setOpacity(opacity) {
    fading_div.style.opacity = opacity / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity + ')';
}

function fadeOut(opacity) {
    setOpacity(opacity);
    if (opacity == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

function fadeIn(opacity) {
    setOpacity(opacity);
    if (opacity == 1) {
        fading_div.style.display = 'block';
    }
    if (opacity == 100) {
        done = true;
    }
}

...
setTimeout("fadeIn(" + i + ")", i * 5);
...

Es eliminiert die inund outmagische Konstanten und viele Bedingungen, die ihre Werte überprüfen.

Die Verwendung von Variablennamensuffixen wie " opacity_valuesieht etwas redundant aus (da Variablen Werte speichern)", habe ich sie umbenannt. Gleiches gilt für die function_opacityFunktion.

Ich habe die zweite für die Schleife geändert, um weniger Rechenoperationen zu verwenden. Ich denke, das Folgende ist leichter zu lesen:

for (var i = 1; i <= 100; i++) {
    setTimeout("fadeOut(" + (100 - i) + ")", i * 5);
}
Bitte übergeben Sie keine Zeichenketten an `setTimeout`! Es ist sie. Übergeben Sie eine Funktion. setTimeout ((function (x) {return function () {fadeOut (100-x);};}) (i), i * 5); `Es befindet sich in einer Schließung, da sich` i` in der `for`-Schleife ändert . Rocket Hazmat vor 8 Jahren 2
Danke, @Rocket! Könnten Sie mir ein Beispiel oder einen Link mit einer Erklärung geben, warum es besser ist? Ich bin kein JavaScript-Guru. (Vielleicht möchten Sie es als Antwort schreiben, da in der Frage die gleiche Zeichenfolge vorbeigeht, und wir können sie bestätigen.) palacsint vor 8 Jahren 0
4
Rocket Hazmat

Dies ist nur eine Erweiterung der Antwort von @ palacsint. Sie sollten keine Strings übergeben setTimeout, die verwendet werden eval, was ineffizient und unsicher ist. Sie sollten eine Funktion übergeben.

Das Problem ist, dass sich in der forSchleife iÄnderungen ergeben, sodass Sie einen Abschluss verwenden müssen.

Tu das nicht:

for (var i = 100; i >= 1; i--) {
   setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
}

Stattdessen:

for (var i = 100; i >= 1; i--) {
   setTimeout((function(x){
      return function(){
         function_opacity(x, 'out')
      };
   })(i), (i - 100) * -1 * 5);
}

Das kann etwas unordentlich aussehen. Ich empfehle, eine Funktion zu deklarieren, die eine Funktion separat zurückgibt.

function call_opacity(i, d){
    return function(){
      function_opacity(i, d);
    };
}

Dann mach:

for (var i = 100; i >= 1; i--) {
   setTimeout(call_opacity(i, 'out'), (i - 100) * -1 * 5);
}
Danke Rocket! Hier ist ein Link zum Thema, um Ihre Antwort zu sichern. Danke fürs Fetzen! http://stackoverflow.com/questions/6232574/is-it-bad-practice-to-pass-a-string-to-settimeout-if-yes-why Hakan vor 8 Jahren 1