jQuery: Elemente nacheinander einblenden

[Agosphere]

Moin moin,

ich möchte hier einen Smiley Pixel für Pixel aufklappen lassen, wenn auf das "Go!" geklickt wird, nur bekomme ich es nur hin, entweder alles oder nichts aufklappen zu lassen ;P
der loop muss irgendwie anders... könnt ihr mir sagen, wie? am (this) scheitert es halt
um das komplette bild zu sehen, bei jQ den ersten .hide() befehl rausnehmen
http://jsfiddle.net/wEZ8G/

Vielen Dank schonmal im Voraus

 

[Duddle]

$(this) ist $('#smiley #smiley_go'), also ist $(this).next() das nächste <div>. Auch wenn du es zwanzig mal aufrufst bleibt der Kontext gleich, also bleibt das ausgewählte <div> gleich.


Duddle

 

[Agosphere]

Ja, das weiß ich.. wie kann man es denn so machen, dass er immer das jeweils nächste vom vorherig eingeblendeten ansteuert? Steh' grad aufm Schlauch

 

[cebito]

Warum benutzt du nicht deinen Zähler um direkt anzusprechen?

$('#smiley div:nth-child(' + i + ')')

Aber, was du vorhast (was ich denke) wird dir so nicht gelingen. Also das sie sich nacheinander einblenden. Da musst du schon einen Timeout einbauen.

 

[Agosphere]

Ok, der :nth-child Ansatz ist schonmal supi )
timeout so?

var i = 1;
      while(i <= 225) {
                setTimeout(function() {
                    $('#page4 #smiley div:nth-child(' + i + ')').fadeIn();
                    i++;
                }, 500);
            }

dabei stürzt er mir ab haha

bei dem wird weiterhin alles direkt eingeblendet:

var i = 1;
      while(i <= 225) {
                    $('#page4 #smiley div:nth-child(' + i + ')').fadeIn();
                    setTimeout(function() {}, 500);
                    i++;
            }

 

[Duddle]

setTimeout ist keine Pause, sondern wie ein Wecker, nur eben dass du festlegst, was beim "Klingeln" passiert. Dein erster Ansatz ist also korrekter als der andere. Der Absturz kommt wohl davon, dass du zu viel zugleich machen willst.

Der bessere Weg wäre aber, wenn ein Timeout sich selbst nach 500ms aufruft, nur eben mit einem erhöhten Index. Alternativ könntest du mit einem Callback in .fadeIn() die Funktion aufrufen, die das Element auswählt und darauf .fadeIn() aufruft, usw.


Duddle

 

[cebito]

dabei stürzt er mir ab haha

Ein Blick in die Fehlerconsole lohnt immer, ich denk mal der index ist zu groß.

btw., weil mich diese div-Suppe ziemlich stört und ein 50ms-Fade-Effeckt sowieso so gut wie nicht wahrnehmbar ist. Warum zeichnest du nicht in ein Canvas?

http://jsfiddle.net/pcfTY/

 

[Agosphere]

boah!
habe noch nie was mit canvas gemacht. Das ist ja saaagenhaft Da muss ich mich ja mal schlau machen, damit ich das verstehe - gaaanz vielen Dank

 

[cebito]

Da muss ich mich ja mal schlau machen, damit ich das verstehe

Wenn du Fragen hast - frag
Ansonsten findest du hier http://canvas.quaese.de/ einen leichten und gut verständlichen Einstieg.