Forum PHP.pl

Sytuacja wyglada nastepujaco:
w czesci serwisu wyswietlanie tresci obsluguje AJAXem, a dokladnie frameworkiem jQuery. Procz oczywistego dynamicznego ladowania uzywam tam efektow, fadeOut, fadeIn oraz animate, ktore 'ubarwiaja' szara wirtualna rzeczywistosc.

Problem nastepuje w momencie, gdy chce wywolac animate() dla zaktualizowanego trescia diva, aby plynnie doskalowal sie do nowej wysokosci:

[PHP] pobierz, plaintext 
<?php
$("#dzial_content").animate({height: makeAjax.curr}, "slow", function () {
				$("#dzial_content").fadeIn("slow");	
			});
?>
[PHP] pobierz, plaintext 

skrypt reaguje tak, jakby tej wysokosci nie dostawal w ogole, mimo ze kilka linijek wyzej jest zczytywana poprawnie. Ponizej wkleje caly kod obslugujacy ladowanie ajaxa i skalowanie divow:

[PHP] pobierz, plaintext 
<?php
$(document).ready( function() {
	if($("#dzial_content")) {
		makeAjax.start();
	}
});
 
var makeAjax = new Object({
 
	divH: "0", curr: "0",
 
	start: function() {
 
	$.listen('click','.pr_link',function() {  
		makeAjax.divH=$("#dzial_content").height();
		var content_show = $(this).attr("title"); 
		var newHgB;
		var newHgL;
		var newHgM;
		$(".navi_sel").css("color", "#6c6c6c");
		$(this).css("color", "#e35f03");
		$.ajax({  
			method: "get",url: "index.php",data: content_show,  
			cache: false, 
			success: function(html){ 
				$("#dzial_content").fadeOut("slow", function() {
					makeAjax.curr = $("#dzial_content").html(html).height();
					newHgL = $("#left").height() - makeAjax.divH + makeAjax.curr;
					$("#left").animate({height: newHgL}, "slow");
					$.getScript("js/galeria.js");
				});	 
			$("#dzial_content").animate({height: makeAjax.curr}, "slow", function () {
				$("#dzial_content").fadeIn("slow");	
			});		
			}
		}); 
		return false;
 
	}); 
 
}
 
});
?>
[PHP] pobierz, plaintext 

uzywam tam plug-inu listen, aby wczynae ajaxem linki reagowaly na skrypt.
Skrypt galerii jest dla sprawy nieistotny.
element #left jest podobnie nieistotny - musi byc aktualizowany, gdyz jest pozycjonowany jsem od poczatku.

Cala sprawa rozgywa sie w zdarzeniu success - probowalem roznych kombinacji zagniezdzania funkcji, zawsze konczylo sie tym ze height dla #dzial_content jest zczytywany niepoprawnie (co lepsze dla obliczenia wysokosci #left dziala juz poprawnie). Wyglada to efekt nielinearnosci parsowania kodu - najpierw jest trzaskane animate(), a potem html(), lecz nie wiem jak to rozwiazac.

Wkleje jeszcze fragment html'a:

[HTML] pobierz, plaintext 
<div id="dzial_content_box">
   <div id="dzial_content">
ladowana tresc
   </div>
</div>
[HTML] pobierz, plaintext 

I css dla tych divow:

[HTML] pobierz, plaintext 
#dzial_content_box
{
	width: 670px;
	float: left;
	background: url(../images/loader.gif) no-repeat center center;
}
 
#dzial_content
{
	width: 670px;
	float: left;
	background: #fff;
}
[HTML] pobierz, plaintext 

Bede wdzieczny za wskazanie rozwiazania lub odeslania do jakiegos przykladu rozwiazujacego problem. Przepytalem juz google na rozne sposoby, lecz milcza jak zaklete.

EDIT:
odpowiem sam sobie, problem rozwiazany

jakby kogos interesowalo to problem tkwil w tym, ze fadeOut ustawia display: none; elementu, a to z kolei traktowane jest jako height: 0;
stad swirowanie .animate()

pare kosmetycznych zabiegow i gra muzyka.

Ten post edytował marshal 28.08.2008, 23:53:25