Javascript vergisst Variable + merkwürdiges Verhalten...

[Sven Rautenberg]

Moin!

Deine Funktion läuft auch deshalb nur einmal, weil du zwar globale Variablen i und j zum Zählen der Bilder verwendest, diese aber jeweils nur erhöht (i) oder erniedrigt (j) werden - und es dann bleiben. Das heißt: Nach dem ersten mouseover ist i auf 5 - entsprechend wird das zweite Mouseover direkt das letzte Bild aufrufen, ohne es zu animieren. Beim Mouseout ist das genauso.

Ja, das wäre eigentlich mein Hauptproblem. Wie kann ich i wieder auf 0 setzen? Man könnte meinen, if (i == 5) i = 0; aber da beginnt dann die Animation zu flackern.

Dein bisheriger Ansatz ist schlecht. Du brauchst für jeden Button eine Variable, die die Nummer der angezeigten Bildes enthält. Also jeder Button kriegt sein "i" - welches auch als "j" benutzt wird fürs Abwärtszählen.

Außerdem brauchst du je Button noch eine Variable, die mit true oder false angibt, ob aufwärts oder abwärts gezählt werden soll, also ob mouseover oder mouseout erfolgt.

Mit diesen Variablen kannst du dann eine _einzige_ Funktion füttern, die dir die Animation realisiert. Diese Funktion kriegt gesagt, welcher Button zu animieren ist, liest die zwei globalen Variablen des Buttons aus und reagiert entsprechend.

onmouseover und onmouseout setzen nur die Richtungsvariable (auf true oder false) und initialisieren die Animationsfunktion. Die Animation selbst läuft aber von den Events her vollkommen unabhängig. Das hat den Vorteil, dass du auch während der Animation (in der _einen_ Funktion) die Animationsrichtung einfach durch setzen der Richtungsvariablen umdrehen kannst. Die Animation wird dann einfach sofort in die andere Richtung gehen.

Das Initialisieren der Animationsfunktion ist im Prinzip so zu lösen, dass du (wieder in einer globalen Variablen) speicherst, ob gerade eine Animationsfunktion für einen Button läuft. Je Button darf nur eine Animation laufen. Wenn eine Animation läuft, reicht das Ändern der globalen Richtungsvariablen, um die neue Animation abzuspielen. Wenn keine Animation läuft, muß sie gestartet werden.

Man könnte diese Initialisierung auch damit überflüssig machen, das gleich beim Seitenladen eine sich endlos aufrufende Funktion gestartet wird, die regelmäßig schaut, ob irgendwas animiert werden muß - das würde aber heftig Performance fressen, auch wenn gar nichts los ist, und ist deshalb nicht ratsam.

Nochmal zum Mitschreiben:

Zerlege deine Funktionen in drei Stücke:

1. Globale Variablen, die die Zustände aller Animationen repräsentieren und auf die sowohl die Animationsfunktion als auch die mouseover/out-Events zugreifen.
2. Eine Animationsfunktion, die nur dafür sorgt, dass
a) das nächste Bild angezeigt wird, entsprechend der globalen Variablen "Bildnr" und "Richtung" des jeweiligen Buttons, und
b) die sich selbst wieder aufruft, um die Animation fortzusetzen, sofern die Animation den Endpunkt noch nicht erreicht hat. Andernfalls muß sie (durch Rücksetzen der globalen Variablen) melden, dass die Animation beendet ist.
3. Eine Animations-Initialisierung, die die Animation eines Buttons anstößt, sofern dieser Button derzeit nicht animiert wird, und diesen Zustand in der globalen Variablen vermerkt.

Das klingt auf den ersten Blick erstmal furchtbar kompliziert, aber du erleichterst dir damit viele Dinge, wenn du so ein Konstrukt erstmal sauber aufgebaut hast. Vielleicht willst du demnächst als Animation nicht Bilder austauschen, sondern z.B. Layer durch die Gegend schieben - das geht grundsätzlich genauso, wie Bilder austauschen. Du bastelst dir also jetzt ein Grundgerüst, das du später immer wieder einsetzen kannst, wenn etwas zu animieren ist.

- Sven Rautenberg