✔ [jQuery] slide Problem

[Chris Wi]

Hallo @ all und ein fröhliches neues Jahr!
Also ich hab online schon gesucht aber nicht das gefunden was auf meine Lage zutrifft.
Und zwar habe ich eine Seite und habe anfangs dort einen Inhalt.
Beim Klick auf "Weiterlesen..." slidet der div nach oben und es wird per jQuery ein Bild eingesetzt. Bei dem Klick wird außerdem eine PHP Datei angepostet.
Diese jedoch antwortet erst in 3 Sekunden, sodass man das Bild auch noch sieht.
Der div slidet nochmal nach unten, und gibt somit die Sicht auf das Bild frei (soweit ja alles richtig).
Jetzt antwortet aber die PHP Datei und der div slidet nochmal nach oben, jQuery lädt "die Antwort" in den div und sollte ihn dann nochmal herab sliden lassen.
Da liegt aber das Problem, denn dabei gibt es einen kleinen Sprung. Er macht ca. 20px und dann springt er und zeigt alles an.
Ich hab online gelesen, dass man die Höhe definieren muss (z.B. über $('#element').height();) aber das funktioniert nicht (wie denn auch wenn der div eingefahren ist). Da die Antwort immer individuell ist, kann ich vorher nicht die höhe ermitteln (zumindest nicht über einen mir bekannten Weg).
Hier mal der Code (in kurz Fassung):

<!-- Überschrift für die Seite -->
<h3 class="headtitle">Dear Diary...</h3>
<!-- Um den Abstand etwas zu vergrößern -->
<br />
<div id="diary-content">
	<h4>01. Januar 2012</h4>
	<hr width="40%" align="left" />
	<span class="color">16:50 Uhr -</span> Dear Diary..<br /> TEXT, BlaBlaBla, -.- usw...
	<a href="#" style="float: right;" onclick="see_diary('19');">Weiterlesen...</a>
	<hr width="40%" align="left" />
</div>

Der zugehörige JavaScript Code für Weiterlesen:

function see_diary(id) {
	var oldtext = $('#diary-content').html();
	$('#diary-content').slideUp('slow', function () {
		$('#diary-content').html('<center>
			<img src="http://www.one-radio.tk/images/load.gif" alt="Load...">
		</center>');
		$('#diary-content').slideDown('fast');
	});
	$.post('http://www.one-radio.tk/function.php', {
		code: 'CODE',
		action: 'diary-view',
		id: id
	}, function (data) {
		if(data != 'error') {
			$('#diary-content').slideUp('slow', function () {
				$('#diary-content').html(data);
			});
			$('#diary-content').slideDown('fast');
			history.pushState(null, null, "http://www.one-radio.tk/diary/"+id);
		} else {
			blend('error', 'Dieser Beitrag existiert nicht, oder ist nicht verf&uuml;gbar');
			$('#diary-content').slideUp('slow', function () {
				$('#diary-content').html(oldtext)
			}).slideDown('slow');
		}
	});
}

Wegen den - macht er Zeilenumbrüche die nicht da sind. Sorry ... Kann es leider nicht ändern. Hoffe ihr könnt mir helfen. Danke schon mal im Voraus.

Schönen Abend noch.
Chris

 

[CPoly]

Da die Antwort immer individuell ist, kann ich vorher nicht die höhe ermitteln (zumindest nicht über einen mir bekannten Weg).

Ich mache dir den Weg bekannt:

Nach dem du den neuen Inhalt gesetzt hast und bevor du das DIV nach unten slidest, erzeugst du eine Kopie des DIV, machst es außerhalb des Sichtfenster (z.B. position:absolute und left:-10000px) sichtbar und ermittelst von diesem die Höhe.

http://api.jquery.com/clone/

 

[Chris Wi]

ouh okay das ist einfach Dankeschön werde es mal testen

 

[Chris Wi]

Okay hab des Problemes Ursprung gefunden. Es lag nicht direkt daran, dass er die höhe nicht wusste, sondern einfach daran dass ich den Container upsliden lies, den Text hinein geladen habe, und >parralel< dazu ihn wieder downsliden lies. Setzt man den slideDown in die function des slideUp's ist alles wieder in Butter ;-)

Hier jetzt nochmal mein Javascript Code:

function see_diary(id) { 
    var oldtext = $('#diary-content').html(); 
    $('#diary-content').slideUp('slow', function () { 
        $('#diary-content').html('<center> 
            <img src="http://www.one-radio.tk/images/load.gif" alt="Load..."> 
        </center>'); 
        $('#diary-content').slideDown('fast'); 
    }); 
    $.post('http://www.one-radio.tk/function.php', { 
        code: 'CODE', 
        action: 'diary-view', 
        id: id 
    }, function (data) { 
        if(data != 'error') { 
            $('#diary-content').slideUp('slow', function () { 
                $('#diary-content').html(data); 
                $('#diary-content').slideDown('fast'); 
            }); 
            history.pushState(null, null, "http://www.one-radio.tk/diary/"+id); 
        } else { 
            blend('error', 'Dieser Beitrag existiert nicht, oder ist nicht verf&uuml;gbar');
            $('#diary-content').slideUp('slow', function () { 
                $('#diary-content').html(oldtext) 
            }).slideDown('slow'); 
        } 
    }); 
}

Danke aber trotzdem für die Hilfe ;-)