jQuery animate Funktion: div auf div fallen lassen

Tim Eipert

Intermediate

Posts: 101

Monday, August 23rd 2010, 4:15pm

jQuery animate Funktion: div auf div fallen lassen

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?
http://api.jquery.com/animate/

Masterog

Trainee

Posts: 32

Monday, August 23rd 2010, 6:51pm

Moin,

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

	JavaScript Code
1	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

Intermediate

Posts: 101

Tuesday, August 24th 2010, 11:29am

Quoted from "Masterog"
Moin,

im Prinzip kannst du einfach das Beispiel von der Seite verwenden, bei dir würde es das so aussehen
JavaScript Code
1
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

Intermediate

Posts: 101

Tuesday, August 24th 2010, 2:04pm

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

	Source code
1 2 3 4 5 6	<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

Trainee

Posts: 32

Tuesday, August 24th 2010, 10:03pm

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.

	JavaScript Code
1	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

Intermediate

Posts: 101

Wednesday, August 25th 2010, 11:06am

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

Tim Eipert

Intermediate

Posts: 101

Wednesday, August 25th 2010, 6:55pm

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:

JavaScript Code

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);

Das Ajax wird laut Firebug gesendet.

Masterog

Trainee

Posts: 32

Wednesday, August 25th 2010, 7:19pm

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

	JavaScript Code
1	if(!data) { /* ... */ }

Bzw komplett in saubrer form:

JavaScript Code

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

Intermediate

Posts: 101

Wednesday, August 25th 2010, 7:53pm

Also, die 2. Datei gibt z.B.

Quoted

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:

JavaScript Code

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]); 
			}
		}
	});
 
}

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

Masterog

Trainee

Posts: 32

Wednesday, August 25th 2010, 8:09pm

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

Intermediate

Posts: 101

Wednesday, August 25th 2010, 8:49pm

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

Masterog

Trainee

Posts: 32

Wednesday, August 25th 2010, 9:40pm

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

Intermediate

Posts: 101

Thursday, August 26th 2010, 9:31am

Reichen da 10 Sekunden?

Masterog

Trainee

Posts: 32

Thursday, August 26th 2010, 11:08am

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