Überblendung als Endlosschleife?
bearbeitet von Rolf bVorbemerkung 1: alpha(opacity=n) ist uralt, das kansnt Du weglassen. Ab IE9 reicht opacity.
Vorbemerkung 2: Mache step NICHT zu einer globalen Variable. Globals sind Gift. Lokal ist prima. Eine globale Variable brauchst Du nur dann, wenn Du einen Mechanismus brauchst um die Animation von außerhalb zu stoppen.
Vorbemerkung 3: Identifiziere Dein Image nicht per document.getElementsByTagName("img"). Der Zugriff auf das Element [1] des resultierenden Arrays ist eine magische Zahl und fehleranfällig. Gib dem Image eine ID und benutze getElementById(). Oder gib allen Images, deren Transparenz pulsieren soll, eine Klasse, benutze getElementsByClassName und laufe über alle Elemente des resultierenden Arrays.
So. Nun zu deinem Wunsch :)
setTimeout() "hinterlegt" sozusagen einen Funktionsaufruf, der nach Ablauf der genannten Zeit automatisch vom Brauser aufgerufen wird. Der Wert von step aus dem n-ten Aufruf wird dabei mit gespeichert und dem (n+1)-ten Aufruf übergeben.
Um eine Endlosschleife zu erzeugen, empfehle ich Dir
~~~js
step = step % 100 + 2;
window.setTimeout(function () { fadeOddballs(step); }, 100);
~~~
D.h. kein IF mehr und dafür beim Erhöhen von step durch den Modulo 100 Operator dafür sorgen, dass die Variable die Folge 2, 4, ..., 96, 98, 100, 2, 4, ... , 96, 98, 100, 2, 4, ... , durchläuft.
Wenn Du die Opacity auf- und ablaufen lassen möchtest, brauchst Du einen zweiten Parameter der die aktuelle Laufrichtung angibt und musst die Änderung von step entsprechend anpassen. Das überlasse ich Dir als Übung für den Leser :D
Gruß
Rolf
Überblendung als Endlosschleife?
bearbeitet von Rolf bVorbemerkung 1: alpha(opacity=n) ist ein reiner IE Filter und sogar bei Microsoft seit IE9 deprecated. Du kannst damit spielen, aber solltest es nicht für ein Projekt in der Wilden Weiten Welt verwenden. Es gibt schon länger das Style-Attribut opacity: n (auch hier im Wiki beschrieben), das allerdings einen float-Wert von 0-1 erwartet, Du musst also deinen Step-Wert dafür durch 100 teilen
Vorbemerkung 2: Mache step NICHT zu einer globalen Variable. Globals sind Gift. Lokal ist prima. Eine globale Variable brauchst Du nur dann, wenn Du einen Mechanismus brauchst um die Animation von außerhalb zu stoppen.
Vorbemerkung 3: Identifiziere Dein Image nicht per document.getElementsByTagName("img"). Der Zugriff auf das Element [1] des resultierenden Arrays ist eine magische Zahl und fehleranfällig. Gib dem Image eine ID und benutze getElementById(). Oder gib allen Images, deren Transparenz pulsieren soll, eine Klasse, benutze getElementsByClassName und laufe über alle Elemente des resultierenden Arrays.
So. Nun zu deinem Wunsch :)
setTimeout() "hinterlegt" sozusagen einen Funktionsaufruf, der nach Ablauf der genannten Zeit automatisch vom Brauser aufgerufen wird. Der Wert von step aus dem n-ten Aufruf wird dabei mit gespeichert und dem (n+1)-ten Aufruf übergeben.
Um eine Endlosschleife zu erzeugen, empfehle ich Dir
~~~js
step = step % 100 + 2;
window.setTimeout(function () { fadeOddballs(step); }, 100);
~~~
D.h. kein IF mehr und dafür beim Erhöhen von step durch den Modulo 100 Operator dafür sorgen, dass die Variable die Folge 2, 4, ..., 96, 98, 100, 2, 4, ... , 96, 98, 100, 2, 4, ... , durchläuft.
Wenn Du die Opacity auf- und ablaufen lassen möchtest, brauchst Du einen zweiten Parameter der die aktuelle Laufrichtung angibt und musst die Änderung von step entsprechend anpassen. Das überlasse ich Dir als Übung für den Leser :D
Gruß
Rolf