jQuery fade/load/fade again

[godsent]

My code looks like this, and this suppose to fade out, then load the page into a div, and after the page is loaded fade in.

 

But it works like this: load page then fade out and fade in. Or fade out, fade in, and then load the page.

 

<script type="text/javascript">
	function content(id) {
		$("#container").animate({opacity: 0.1}, 600)
		.load("handlers/container.php?o="+id+"")
		.animate({opacity: 1}, 800);
	}
</script>

 

Im not sure how to make actions go one after other. Please help me if you know the sollution

[jpratt]

The .load() way of ajax request in jquery is the very simple way of ajax requests, as such does not come with very many options. The most flexible out of the jquery ajax requests is the .ajax method of doing this. This gives you more options to work with such as beforeSend option and a complete option. This helps control when the request is fired, what to do before and after its complete. Go here to see how it works and check out the options to see if you might want to go this route. http://docs.jquery.com/Ajax/jQuery.ajax