[gelöst]JavaScript - Problem mit Schleife, setTimeout,...

[C64]

Hallo zusammen,

ich bastel gerade aus Spaß an der Freude an dieser kleinen Seite als Dankeschön für meine Freundin:
http://creativecat.de/testdesigns/anna/

So, der Code ist ja wieder mal äußerst nice und minimalistisch
Ein Array umfasst alle Begriffe und die werden dann alle schön mit php in einzelne divs gepackt und mit der Klasse annaX (X steht für die einzelnen Nummern) versehen.
Soweit so gut. Mein JavaScript arbeitet mit jQuery.
Es funktioniert auch alles, wenn ich keine Schleife zu basteln versuche.
Der Code für das einzelne ausblenden und einblenden schaut aktuell so aus:
Die Funktion die den aktuellen div zufällig platziert und zufällig eine Schriftgröße zuordnet und schließlich ein- und nach einiger Zeit wieder ausblendet:

function anna(nummer){
top=Math.round(20+300*(Math.random()));
right=Math.round(1+40*(Math.random()));
grose=Math.round(16+40*(Math.random()));
$(nummer).css({'font-size' : grose+'px', 'top' : top+'px','right' : right+'%'});
$(nummer).fadeIn(blende, function(){
setTimeout(function(){
$(nummer).fadeOut(blende)
},dauer)
});
}

Und nun etwas kompliziert/umständlich, weil ich eben nicht mit der Schleife zurechtkomme:
Zunächst die einzelnen Variablen:

blende=1000;
dauer=2000;
pause=700;
einzel=blende*2+dauer+pause;
gesamt=18*einzel;

Nun starte ich für jedes einzelne Div gleichzeitig (mit setTimeout versetzt) die Funktion:
zB eben für den 2. Div (da sieht man dann die Formel, mit der ich die Intervalle berechne:

setTimeout("anna('.anna1')",1*einzel+500);
setTimeout("anna('.anna1')",gesamt+1*einzel+500);
setTimeout(function(){
setInterval(function(){
setTimeout("anna('.anna1')",gesamt);
},gesamt);
},500+1*einzel);

Das funktioniert einwandfrei, wenn ich das selbst für jeden Container hinschreibe.

Alles wäre aber sehr viel einfacher, wenn ich eine Endlosschleife baue die von 0 bis 18 durchläuft und dann jeweils die Funktion aufruft.
Aber das will nicht funktionieren

Diese Schleife sollte eigentlich einmal durchlaufen und das Skript von oben wenigstens für alle divs starten.
Ich bekomme keinen Fehler ausgespuckt, aber das Skript mag so nichts tun. Wenn ich mir mit alert ausgeben lasse, was name ist, dann passt das. Er gibt mir alle "anna0" bis "anna18" aus.
Aber effektiv sehe ich nichts...

i=0;
while(i<19){
name=".anna"+i;
setTimeout(function(){anna(name);},i*einzel+500);
setTimeout(function(){anna(name);},gesamt+i*einzel+500);
setTimeout(function(){
setInterval(function(){
setTimeout(function(){anna(name);},gesamt);
},gesamt);
},500+i*einzel);
i++;
}

Noch schöner wäre es, wenn ich von 0 bis 18 durchgehe und er solange in der Schleife wartet, bis die Animation eines divs zuende ist, dann erhöht er i um eins und macht mit dem nächsten div weiter. Aber wenn ich da was zusammenschreibe, dann meldet mir Safari nur "langsames Skript" und ich schaffe es damit meinen gesamten Rechner praktisch unbrauchbar zu machen, bis ich Safari "notabschalte"

Hat jemand ne Idee, wie ich das einfacher hinbekomme?

 

[C64]

PS
So würde ich jetzt ja spontan die vorher erwähnte Schleife programmieren:

i=0;
while(i<19){
name=".anna"+i;
setTimeout(function(){anna(name);},einzel);
alert(name);
i++;
}

Am Ende würde ich dann noch ein:

if(i=19){i=0;}

dranhängen, denn dann hätte ich eine Endlosschleife. Die alerts kommen aber direkt hintereinander. Und es wird einmal ein div ein- und wieder ausgeblendet. That's it. Eigentlich sollte er doch die Zeit einzel abwarten und dann die Funktion anna mit dem Parameter name starten. Macht er aber nicht

 

[C64]

Hurra
Ich habs hinbekommen - mit einem inzwischen schon recht kleinen Code
So einfach
Da war ich wohl mal wieder zu sehr bei meinem guten alten Basic 2.0 verharrt!

function anna(nummer){
top=Math.round(20+300*(Math.random()));
right=Math.round(1+40*(Math.random()));
grose=Math.round(16+40*(Math.random()));
$(nummer).css({'font-size' : grose+'px', 'top' : top+'px','right' : right+'%'});
$(nummer).fadeIn(blende, function(){
setTimeout(function(){
$(nummer).fadeOut(blende)
},dauer)
});
}

function ablauf(){
if(i<anzahl){
nummer=".anna"+i;
anna(nummer);
i++;
}
else{
i=0;
nummer=".anna"+i;
anna(nummer);
i++;
}
}

$(document).ready(function(){
$(".anna").hide();
anzahl = $(".anna").length;
blende=1000;
dauer=2000;
pause=700;
einzel=blende*2+dauer+pause;
i=0;
ablauf();
setInterval("ablauf()",einzel);
});