Array durchlaufen mit Pausen

[Garavani]

Hallo Leute,

ich versuche gerade eine Animation zu erstellen mit Hilfe eines (web)Fonts.

dazu habe ich eine Schrift erstellt, deren Buchstaben mit den einzelnen Bildern belegt sind.
Das klappt auch alles wunderbar.

lediglich mit dem Durchlaufen meines Arrays habe ich (Anfänger) Probleme.

So mein div in der page:
<div class="container"><h1 id="step">A</h1></div>

So sieht meine Animationsfunktion bisher aus (wird z.B. durch Klick oder on document ready ausgelöst):

function stepAnimation() {
steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M","N","O","P","Q","R","S","T","U","V","W","X ","Y ","Z","a","b","c","d","e","g","i","j","k","l", "m", "n","o","p","q","r","s","t","u","v","w","x","y ","z ","0","1","2","3","4","5","6","7","8","9",":") ;
while(show = steps.shift()) {
$('#step').delay(200).text(show);
}
}

oder auch:

function stepAnimation() {
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M","N","O","P","Q","R","S","T","U","V","W","X ","Y ","Z","a","b","c","d","e","g","i","j","k","l", "m", "n","o","p","q","r","s","t","u","v","w","x","y ","z ","0","1","2","3","4","5","6","7","8","9",":") ;
var show = "";
for(var i = 0; i < steps.length; i++) {
show = steps[i];
}
document.getElementById('step').innerText = show;
}

Bei beiden (und auch anderen Versionen) funktioniert das ganze scheinbar irgendwie, aber wohl zu schnell,
da ich stets nach dem Start nur das Endbild (also ":" aus dem Array) zu sehen bekomme.
Ich muss irgendwie eine Pause zwischen die einzelnen Bilder bekommen, damit die Animation auch sichtbar fürs Auge abläuft.
Das delay in der oberen jquery Variante ging auch nicht.
Ich mag jquery gern, ist mir also auch recht.

Kann mir jemand helfen?
Oder erkläre ich mich schlecht?

Danke Euch sehr

Garavani

[Christian Marquardt]

In dem letzen Beispiel sehe ich keine Pause und im ersten Beispiel brauchst du doch nur das delay auf bsp. 5 Sek. zu setzen um zu sehen, ob es funktioniert und langsamer ist

[Falk Prüfer]

Hallo,
ich weiss nicht genau, wie das delay() von JQuery programmiert ist, aber wahrscheinlich gibt es die Kontrolle nicht an das Programmfenster zurück, so dass keine Aktualisierung der Darstellung erfolgt. Dies erreich man nur, indem man z.B. durch Nutzen der Funktionen window.setTimeout oder auch window.setInterval eine echte Event-Steuerung realisiert. Hier mal ein Bsp. mit setTimeout:
[highlight=javascript]
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M",
"N","O","P","Q","R","S","T","U","V","W","X","Y ",
"Z","a","b","c","d","e","g","i","j","k","l","m ",
"n","o","p","q","r","s","t","u","v","w","x","y ",
"z","0","1","2","3","4","5","6","7","8","9",": ") ;
var pos = 0;

function stepAnimation() {
var show = steps.shift();
if (show) {
document.getElementById('step').innerHTML = show;
window.setTimeout(stepAnimation, 200);
}
}
[/highlight]

Durch den ersten Aufruf von stepAnimation() wird die Animation gestartet.

Gruß Falk