[FRAGE] DIV in einer Tabellenzelle animieren

[FabianScho]

Hallo liebe Community,

mein Name ist Fabian und das ist meine erste Frage in diesem Forum.
Ich programmiere seit kurzer zeit in Javascript(mit HTML, CSS, AJAX, JQUERY) und habe nun eine Frage.

Ich habe ein einfaches 4-Gewinnt programmiert (Tabelle mit 6 Zeilen und 7 Spalten), bei dem sich immer das unterste Feld, welches noch frei ist, mit der Farbe eines Spielers (Rot oder Gelb) füllt falls man auf diese Spalte klickt. Nun möchte ich aber nicht das dieses Feld nur die Farbe ändert, sondern ich möchte das ein Stein(div) von oben in Spalte fällt. Nun habe ich an die animate-Funktion gedacht, konnte mir aber nicht vorstellen wie ich diese verwenden sollte.
Habt ihr eine Idee oder habt so etwas schon einmal programmiert?

Ich freue mich auf eure Antworten.

Mit freundlichen Grüßen

Fabian

 

[rico2009]

Ich könnte mir vorstellen das mit position:absolute zu animieren. Der "Stein" sitzt am Anfang irgendwo am oberen Bildschirmrand (ausgeblendet) und wird dann animiert (top: pro Schritt +10px z.B.) nach unten gefahren. Sobald er in den sichtbaren Bereich kommt, wird er noch eingeblendet.

Keine Ahnung ob das funktionieren würde, wäre aber ein Versuch.

 

[kkapsner]

Hast du schon irgendein Framework dabei? Denn selber würde ich Animationen an deiner Stelle nicht selber programmieren... ah sehe gerade:

JQUERY

Ich würde also den Stein da ins DOM packen, wo er an Ende hin soll, ihn dann per position: relative und bottom: 100%; aus dem Fenster rausschieben und ihn dann mit einer Animation auf bottom: 0% "fallen" lassen.

Absolute Positionierung scheint mir in diesem Fall komplizierter zu sein.

 

[FabianScho]

Ich habe es nun wie kkapsner geschrieben hat per JQuery und CSS gelöst.
Vielen Dank für eure Antworten

 

[kkapsner]

Vielen Dank für eure Antworten

Bitte - gern geschehen.

Ich habe es nun [...] gelöst.

Es wäre noch gut, wenn du diese Lösung hier zeigen könntest, dann haben kommende Suchende auch was davon.