Verbesserung an FadeIn bzw. FadeOut Script

W

wlfs

Grünschnabel
Hi,
ich programmiere schon seit langem kleinere Javascript Code-Schnippsel und würde gerne wissen ob man diese eventuell verbessern könnte oder bessere Lösungen vorhanden wären.

Hier seht ihr ein FadeIn und FadeOut Script, ist die Programmierung Okay?
Code: 
var transparenz;
var prozent = 0;
var antwort;
var block="nein";


function fade(div, zeige) {
if(block=="ja"){
}else{
antwort = zeige;
if(antwort=="angezeigt"){
prozent=100;
block="ja";
transparenz = window.setInterval("durchsichtig('"+div+"')",50);
}else{
prozent=0;
block="ja";
transparenz = window.setInterval("anzeigen('"+div+"')",50);
} 
}
}
function anzeigen(div){
if(prozent==105){
window.clearInterval(transparenz);
antwort="angezeigt";
block="nein";
}else{
    document.getElementById(div).style.opacity = (prozent / 100);
    document.getElementById(div).style.MozOpacity = (prozent / 100);
    document.getElementById(div).style.KhtmlOpacity = (prozent / 100);
    document.getElementById(div).style.filter = "alpha(opacity="+prozent+")"; 
prozent=5 + prozent;
}
}
function durchsichtig(div){
if(prozent==-5){
window.clearInterval(transparenz);
antwort="verblasst";
block="nein";
}else{
    document.getElementById(div).style.opacity = (prozent / 100);
    document.getElementById(div).style.MozOpacity = (prozent / 100);
    document.getElementById(div).style.KhtmlOpacity = (prozent / 100);
    document.getElementById(div).style.filter = "alpha(opacity="+prozent+")"; 
prozent=prozent - 5;
}
}
 
Servus,

es dürfte ein wenig ressourcenschonender sein, wenn du dies:
Code: 
document.getElementById(div).style
eingangs der Funktion in einer Variablen speicherst, sonst muss das entsprechende Element bzw, sein style bei jedem einzelnen Zugriff erst aus dem Dokument gefischt werden.

P.S: Danke fürs setzen der Keywords :)
 
Das ist jetzt zwar keine direkte Antwort auf deine Frage, aber du kannst auch einfach ein fertiges und bewaehrtes Script wie z.B. jQuery oder Script.aculo.us/Prototype nehmen.
 
Also wenn man es perfekt haben will sollte man doch schon zu von meinem Vorredner beschriebenen Mitteln greifen. Aber es geht auch relativ leicht mit eigenen Mitteln.
Siehe:
HTML: 
<html>
    <head>
        <script type="text/javascript">
            var Fader = {
                fadeObjects: new Array(),
                fadeTimer: function(el, type, current) {
                    var cur = ((type == 1) ? (parseInt(current) + 5) : (parseInt(current) - 5));
                    Fader.fadeObjects[parseInt(el)].style.opacity = (cur / 100);
                    Fader.fadeObjects[parseInt(el)].style.MozOpacity = (cur / 100);
                    Fader.fadeObjects[parseInt(el)].style.KhtmlOpacity = (cur / 100);
                    Fader.fadeObjects[parseInt(el)].style.filter = "alpha(opacity=" + cur + ")";
                    if (cur <= 100) {
                        window.setTimeout("Fader.fadeTimer('" + el + "',"+type+"," + cur + ")", 50);
                    }
                },
                fadeIn: function(el) {
                    var l = Fader.fadeObjects.length;
                    Fader.fadeObjects.push(el);
                    window.setTimeout("Fader.fadeTimer('" + l + "',1,0)", 50);
                },
                fadeOut: function(el) {
                    var l = Fader.fadeObjects.length;
                    Fader.fadeObjects.push(el);
                    window.setTimeout("Fader.fadeTimer('" + l + "',0,100)", 50);
                }

            };
        </script>
    </head>
    <body>
        <div id="test" style="height:600px;width:600px;border:solid 2px black;" onclick="Fader.fadeOut(this);"> Klick HIER</div>
    </body>
</html>
 
Zuletzt bearbeitet:
Hi,

@Scipio-Aemilianus - ich denke, der verzögerte Aufruf in fadeOut müsste mit anderen Argumenten erfolgen.
Code: 
window.setTimeout("Fader.fadeTimer('" + l + "',0,100)", 50);

@wlfs - Variablen, die nur zur Entscheidung (ja/nein) benötigt werden, wie z.B. block, würde ich als boolesche Variable definieren (true/false), da diese weniger Speicher benötigt als eine Stringvariable.

Ciao
Quaese
 
Oh ja. Hatte die FadeIn function als erste gemacht und getestet und anschließend Copy&Paste. Hab das dann wohl übersehen. Danke, habs korrigiert.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück