JavaScript jQuery Animation erstellen

[27o8]

Hallo,
ich habe 4 Bilder, welche ich gerne in einer Art Tetris-Animation herunterfallen lassen möchte. Jede halbe Sekunde (oder ähnlich) soll das Bild also eine bestimmte Anzahl an Pixel runtergeschoben werden. Sobald es an seinem Bestimmungsort angekommen ist, soll das nächste Bild runterfallen usw.

Die Bilder sollen übereinander gestapelt werden. Beispiel:






Jede Smiley-Reihe ist nun ein Bild. Zuerst würden die grünen von oben reinfallen und dann unten stehen bleiben. Dann die mit der Zunge (bleiben dann etwas über den grünen stehen),d ann die mit der Sonnenbrille, und zu guter letzt die hässlichen.

Mit animate() kriegt man glaube ich nur flüssige Abläufe hin Hat jemand eine Idee?

 

[theHacker]

Guck dir mal den step-Callback an:

Step Function The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

Quelle: https://api.jquery.com/animate/#step

 

[ice-breaker]

Und der Step-Callback zusammen mit einer Modulo-Operation sollte dazu führen, dass die Animation etwas ruckartig abläuft.