JS- Fade In/out

MasterT · 26.07.2013

Hallo,
ich habe mir ein kleines Script gebastelt welches bei Ladezeiten zwischengeschaltet wird. Ich habe mir ein paar Codeschnipsel aus dem großen Google besorgt und sie versucht anzupassen, was mir nicht gelang.

Ich habe drei Punkte die nacheinander von Display: Block; nach Display: none; geschaltet werden, so das es aussieht als würde der Punkt seine Position ändern.

Nun möchte ich aber das diese beim anzeigen eingefadet und danach wieder ausgefadet werden.

Ich bin ein absoluter Javascript noob und hoffe ich konnte mich einigermaßen verständlich ausdrücken

Freundliche Grüße

PHP:

<script type="text/javascript">
            var Blinker = window.setInterval("Blinken()", 1000);

            function Blinken()
            {
                if(document.getElementsByTagName("p")[0].style.display == "none" && (document.getElementsByTagName("p")[1].style.display == "none"))
                {
                    fadeEffect.init('0', 0);
                    fadeEffect.init('1', 1);
                    document.getElementsByTagName("p")[0].style.display = "block";
                    document.getElementsByTagName("p")[1].style.display = "none";
                    document.getElementsByTagName("p")[2].style.display = "none";
                }
                else
                {
                    if(document.getElementsByTagName("p")[1].style.display == "none") {
                        
                        fadeEffect.init('1', 0);
                        fadeEffect.init('2', 1);
                        document.getElementsByTagName("p")[0].style.display = "none";
                        document.getElementsByTagName("p")[1].style.display = "block";
                        document.getElementsByTagName("p")[2].style.display = "none";
                    } 
                    else 
                    {
                        if(document.getElementsByTagName("p")[2].style.display == "none") {        
                        
                            fadeEffect.init('2', 0);
                            fadeEffect.init('0', 1);
                            document.getElementsByTagName("p")[0].style.display = "none";
                            document.getElementsByTagName("p")[1].style.display = "none";
                            document.getElementsByTagName("p")[2].style.display = "block";
                        }
                    }
                }
            }
            var fadeEffect=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 5);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();    

            </script>
            <style type="text/css">
            #box {
                opacity:0; 
                filter:alpha(opacity='0')}
            p {color: #F00 !important;opacity:0; 
                filter:alpha(opacity='0')}
            </style>
            <body onload="fadeEffect.init('box', 1);">
            <center>
            <div id="box" style="background-color: #F00; width: 200px; height: 200px;"></div>
            <div style="position: absolute; top: 50%; height: 200px; margin-top: -100px; width: 500px; left: 50%; margin-left: -250px;">
                <h2>'.$title.'</h2><br />
                <p id="0" style="font-size: 200%;margin-left: -20px;display: block;">.</p>
                <p id="1" style="font-size: 200%;margin-left: 0px; display: none;">.</p>
                <p id="2" style="font-size: 200%;margin-left: 20px; display: none;">.</p>
            </div>
            <!--<script language ="JavaScript">-->
            <!--
            window.location.replace("'.$link.'");
            // -->
            </script>

Duddle · 26.07.2013

AW: JS- Fade In/out

Darf ich fragen, warum du nicht einfach ein animiertes PNG erstellst und dieses bei Bedarf zeigst? Dein Weg scheint mir das Problem von der falschen Seite anzugehen.

Duddle

MasterT · 26.07.2013

AW: JS- Fade In/out

Hey,
ähm ja mit Bildern habe ich es nicht so, beziehungsweise mich nervt es wenn der Browser nicht schnell genug die Grafik aus dem Speicher läd und man dann nur den Platzhalter sieht, weswegen ich das jetzt mit Javascript lösen möchte

Duddle · 26.07.2013

AW: JS- Fade In/out

Eine einfache Ladeanimation wie

ist 700 Byte groß. Ein 56k-Modem lädt diese Datenmenge in 0,1 Sekunden.
Dein gesamter JavaScript-Code ist 2800 Byte groß. Du könntest also 4 mal das .gif laden, bevor das JS übertragen wurde (den HTTP-Request mal ignoriert).

Edit: ein noch besserer Vergleich:

ist 400 Byte groß, also 1/7 von deinem JavaScript.

Duddle

MasterT · 26.07.2013

AW: JS- Fade In/out

Bei Firefox hat man oft das Problem das wen eine Webseite nur kurz dargestellt wird, die Bilder nicht mehr fertig geladen werden, das möchte ich halt umgehen

Duddle · 26.07.2013

AW: JS- Fade In/out

Ich habe zwar noch nie das von dir beschriebene Verhalten beobachtet, aber es ist ja dein Bier.

Weil mir danach war (und um zu zeigen, dass dieser Weg selbst in einem guten Framework zu umständlich ist), habe ich es mal in jQuery geschrieben. Ich empfehle dir, ein oder zwei Grundlagentutorials zu jQuery durchzulesen, falls du den folgenden Code nicht verstehst. Ansonsten frag nochmal, wenn du garnicht zurecht kommst.

HTML:

<!DOCTYPE HTML>
<html lang="en">
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    span {
		font-size:10em;
	    }
	</style>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	    var timer = null;
	    var current = null;
	    function load() {
		if(current == null) {
		    current = $("#dots span:first");
		}
		current.fadeTo(750, 1).fadeTo(750, 0.001);

		var next = current.next();
		if(next.size() == 0) {
		    next = $("#dots span:first");
		}
		current = next;
	    }

	    $(document).ready(function() {
		$("#dots span").hide();
		$("#start").click(function() {
		    window.clearInterval(timer);
		    timer = window.setInterval(load, 1700);
		});
		$("#stop").click(function() {
		    window.clearInterval(timer);
		});
	    });

	</script>
    </head>
    <body>
	<div id="start">start</div>
	<div id="stop">stop</div>
	<div id="dots">
	    <span>.</span>
	    <span>.</span>
	    <span>.</span>
	</div>
    </body>
</html>

Die load()-Funktion macht exakt das gewünschte: nimm einen Punkt (bzw. das <span>) und fade es ein und aus. Ich benutze hier .fadeTo() statt fadeOut/fadeIn, weil fadeTo das Element nicht versteckt, es also immer noch den Platz einnimmt als wäre es sichtbar. Das geht sicher auch besser per CSS, aber egal.
Die 750 sind die 750ms für die jeweilige Animation.
Danach wird das nächste <span> geholt, bzw. das erste wenn es das letzte war.

Der Rest sind nur die Hilfskonstrukte zur Demonstration wie die Funktion und der Intervall bedient werden könnten. Hier stehen die 1700 offensichtlich für die Periode, ich habe auf die 1500 der beiden Animationen noch 200ms angehangen für einen schicken Übergang.

Das schicke an der Variante ist, dass es unabhängig von der Anzahl der <span> im #dots-<div> ist. Aber selbst dann ist das schlichtweg der falsche Ansatz für dein Problem.

Duddle