jQuery slideUp, slideDown

[Soben]

Hello,
I'm going to make a portfolio and am trying to use jquery for effects.
Basically I have several menus and when I click on any of them the showed text in content div of page should change, using ajax. These are levels:
a) SlideUp the #Content div
b) Change the innerHTML of #Content div, using ajax
c) SlideDown, to show the new content

This is the function doing it for me:

function showContent(x){
    $("#content").slideUp("slow", function(){
	var cont = document.getElementById("content");
	if (window.XMLHttpRequest)
	  xmlhttp=new XMLHttpRequest();
	else
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.open("GET",x+".txt",false);
	xmlhttp.send();
	cont.innerHTML = xmlhttp.responseText;
	});
	$("#content").slideDown("slow");
}

But the problem is, if for example "menu a"'s text is vertically 300px long, and "menu b"'s textis 200px long. If I first click on "menu a" then click on "menu b" after sliding down the div, it'll go down to 300px then suddenly its height changes to 200px, which is obviously not what I want.

Any help will be appreciated.
Thanks

Soben

[Airshow]

Try doing the whole thing in jquery rather than hybrid code:

function showContent(x){
	var $cont = $("#content");
	$cont.slideUp("slow", function(){
		$.ajax({
			url: x + ".txt",
			type: "GET",
			success: function(data){
				$cont.html(data).slideDown("slow");
			}
		});
	});
}

(untested)

Note that $cont---.slideDown("slow"); is inside the success function to give the desired effect (I hope).

Airshow

[Soben]

Worked perfectly in firefox and chrome. But still has problems with IE -_-
After slideUp, when you change data suddenly the whole data is shown and disappears fast and slides down.. anyway to solve this?

[Airshow]

Soben,

That's very naughty of IE.

I don't know of a workaround but you could try :

...
  $cont.html(data).hide().slideDown("slow");
  ...

Chances are that IE will still misbehave but you never know.

Airshow

[xylude]

For that kind of stuff I usually use the $(id).load(htmlLocation) function like so:

$('#content').slideUp('slow',function(){
$(this).load('page.html',function(){
$('#content').slideDown('slow');
});
});