jQuery animate Funktion: div auf div fallen lassen

Tim Eipert · 23. August 2010, 16:15

Hallo, ich will mal wieder jQuery benutzen, habe aber lange damit nichts mehr gemacht.
Jetzt brauch ich die animate() Funktion.
Ich habe z.B. 3 Divs, die übereinander an der rechten unteren Ecke positioniert sind.
Der oberste Div ist per CSS mit margin-bottom: 300px ausgestattet. Ich will nun eine Animation mit der animate()-Funktion (Siehe unten) machen, die das obere Div auf die anderen fallen lässt, bis margin-bottom wieder 0 ist. Kann mir jemand helfen?
api.jquery.com/animate/

Masterog · 23. August 2010, 18:51

Moin,

im Prinzip kannst du einfach das Beispiel von der Seite verwenden, bei dir würde es das so aussehen

Quellcode

jQuery('#box1').animate({ bottom: '-=300px' }, 2000 );

die 2000 definiert in Millisekunden die Animationsdauer, das html-element mit der id box1 wird hier verschoben, klar.
soweit ich weiß muss besagte box1 absolut positioniert werden. Deswegen manipuliere ich auch mit der animate-Methode das CSS-Attribut bottom, nicht margin-bottom.

Tim Eipert · 24. August 2010, 11:29

Masterog schrieb:

Moin,

im Prinzip kannst du einfach das Beispiel von der Seite verwenden, bei dir würde es das so aussehen

Quellcode

jQuery('#box1').animate({ bottom: '-=300px' }, 2000 );

die 2000 definiert in Millisekunden die Animationsdauer, das html-element mit der id box1 wird hier verschoben, klar.
soweit ich weiß muss besagte box1 absolut positioniert werden. Deswegen manipuliere ich auch mit der animate-Methode das CSS-Attribut bottom, nicht margin-bottom.

Danke sehr, klappt wunderbar! (Geht mit Relativ auch, da ich vieleicht mehrere Boxen runterfallen lasse, mache ich das lieber mit relative..)

Tim Eipert · 24. August 2010, 14:04

Ok..
Ich hab jetzt was ziemlich schweres vor:
Ich hab z.B. 2 divs schon drin:

Quellcode

<div class="info" id="i2">
INF
</div>
<div class="info" id="i1">
INF
</div>

Wenn man auf die Klickt, kann man jeweils ein Fenster mit jQuery öffnen.
Nun will ich mit AJAX checken, ob ein neuer Info-Teil in der DB ist (das ist kein Problem).
Dann soll ein Kästchen per JS gemacht werden, dass eben auf die anderen runterfällt und dieses soll auch ein Fenster öffnen können.
Das ist denk ich möglich, aber schwer.
Kann jemand helfen?

Masterog · 24. August 2010, 22:03

Moin,

Das is eigentlich überhaupt nich schwer, nutze einfach die append-Methode, mit der kannst du html-fragmente an ein bestehendes Element dranhängen und mit diesem dann arbeiten, z.B.

Quellcode

jQuery('#mutterElement').append('<div class="info" id="i3">INF</div>')

Danach kannst du wie gewohnt auf "#i3" deine Animation anwenden. Wichtig ist hierbei, dass der Zugriff auf "#i3" erst nach dem Erzeugen des HTML-Elements verwendet wird. Wird das Element durch den callback einer AJAX-Anfrage erzeugt, muss sowohl die Animation, als auch das klick-Event des Elements in den Ajax-Block geschoben werden.

Tim Eipert · 25. August 2010, 11:06

Danke!
Ich hab es jetzt mit prepend (weil ich ja stapeln will) geschafft!

Tim Eipert · 25. August 2010, 18:55

Klappt gut, ich frage jetzt mit AJAX auf der 2. Seite ab, ob er eine neue Nachricht hat, wenn nein gibt die 2. Seite false aus.
Wie kann ich jetzt (ich hab success: function(data) {, context auf document.body) überprüfen, ob auf der Seite false steht oder nicht?
Mit einer einfachen if Abfrage funktionierts nicht:

Quellcode

function check_info() {
$.ajax({ url: "testinfo.php", context: document.body, success: function(data){
if(data != "false") {
$.ajax({ url: "testinfo.php", type: 'GET',data: 'bod=true', context: document.body, success: function(bod){
new_info(data,bod);
}
});
}
]}});
}
setInterval("check_info()",5000);

Alles anzeigen

Das Ajax wird laut Firebug gesendet.

Masterog · 25. August 2010, 19:19

Moin,

vorneweg: ich weiß ja nicht, was deine testinfo.php zurückgibt, aber derzeit testest du auf einen String "false", ist das soweit korrekt? Du kannst mit testinfo.php per echo zurückgeben, was du magst, auch boolean. Falls du das getan hast, reicht eine if-Abfrage der Art

Quellcode

if(!data) { /* ... */ }

Bzw komplett in saubrer form:

Quellcode

function check_info() {
$.ajax({
url: 'testinfo.php',
success: function(result) {
if(!$result) { /* ... */ }
}
});
}

der context-Parameter ist dafür allerdings nicht nötig, aber kA, seh ja auch nicht das Gesamtbild.
Solltest du auf der testinfo.php doch einen String ausgeben, womit deine if-Abfrage richtig wäre, solltest du im Firebug schaun, was genau die Antwort der testinfo.php ist.

Tim Eipert · 25. August 2010, 19:53

Also, die 2. Datei gibt z.B.

INF<>Das ist ein Infotext

aus, wenn eine neue Info in der DB ist.
Ansonsten gibt es z.B. nichts aus. Wenn eine neue Info da ist (also nicht nichts da ist), soll das JS-Programm die Funktion new_info mit den Werten "INF" und "Das ist ein Infotext". Das sollte ja mit split gehen!?
Als beispiel:

Quellcode

function check_info() {
$.ajax({
url: 'testinfo.php',
success: function(result) {
if(result != "") {
var splitted_text = result.split("<>");
new_info(splitted_text[0],splitted_text[1]);
}
}
});
}

Alles anzeigen

Ok, ich habs nicht gedacht, aber es klappt. Gibts noch irgendwo Schönheitsfehler?

Masterog · 25. August 2010, 20:09

Nö, das is soweit alles ok denk ich

Vielleicht noch der dezente Hinweis, das Anfragen, die in einem kleinen Zeitintervall wiederholt werden bei größeren Benutzerzahlen deinen Server ziemlich penetrieren, wenn er nebenher noch was anderes zu tun hat. Weiß ja nicht, wo das hier Anwendung findet, einfach nur so am Rande.

Tim Eipert · 25. August 2010, 20:49

Wie könnte ich das ohne Zeitintervalle lösen?

Masterog · 25. August 2010, 21:40

Entweder, du vergrößerst die Intervalle, je größer, desto entspannter für den Server,
oder du erlaubst dem Anwender durch klicken auf einen Link das manuelle Abfragen der testinfo.php mittels AJAX...
oder du kombinierst beides... oder... nein, sonst fällt mir nichts mehr ein

Tim Eipert · 26. August 2010, 09:31

Reichen da 10 Sekunden?

Masterog · 26. August 2010, 11:08

Moin,

da gibts keinen ultimativen Wert, wie gesagt, es war nur nen Hinweis meinerseits. Wenn das Skript nur von meinetwegen 10 Leuten benutzt wird, kannste auch alle 2 Sekunden abfragen... Du wirst es merken, wenn alles ein wenig rumlahmt oder sich Benutzer beschweren. Nen bissl gesunder Menschenverstand und die Frage im Hinterkopf, ob das sein muss und was am besten geeignet ist. Try and fail

jQuery animate Funktion: div auf div fallen lassen

jQuery animate Funktion: div auf div fallen lassen

Quellcode

Masterog schrieb:

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags