Tutorial de AJAX + JQuery

Hola a tod@s soy nuevo en el foro y en esto de la programación. Estoy siguiendo en tutorial de Ajax y como recomienda al final estoy enredando un poco con un LOADING..., bien he insertado un gif de carga, y aparece y desaparece con FadeIn y FadeOut de las librerias de JQuery, hasta aqui guay, lo que a la hora de cargar el tutorial1.html lo hace de golpe, yo lo que quiero es un fundido,pero no me hace el efecto que quiero,seria algo asi??

<script>
$(document).ready(function () {
$("#llamada1").click(function (event) {
// event.preventDefault();
$("#cargando").fadeIn(1500, function(){
$("#cargando").fadeOut(1000, function() {
$(llamarasincrono('tutorial1.html', 'contenidos')).fadeIn(1000);
});
});
});
});

</script>

gracias por vuestro tiempo.

Hola quizá el tiempo de respuesta es muy rapido, por eso no ves la animación, otra es que la respuesta es asincrona, podras ver un ejemplo de como esperarse a la respuesta del AJAX en el siguiente enlace a mi web.

http://elporfirio.com/wp/2014/07/jquery-esperar-respuesta-de-ajax/

Gracias por tu respuesta, después de trastear un poco creo que lo he conseguido y además lo he optimizado un poco, este es el código que he utilizado, eso si, el archivo codigo.js del tútorial no lo utilizo. Hace un efecto fadeOut y un slideDown, estaba inspirado, jejeje.

<div id="menu">
<a id="tutorial1.html">El sentido del tacto</a>
<a id="tutorial2.html">Sensaciones</a>
</div>



<script>
$(document).ready(function () {
$("a").click(function (event) {
var oID = $(this).attr("id");
window.alert(oID);
$("#cabecera").fadeOut("slow", function () {
$("#cargando").fadeIn(1000, function () {
$("#cargando").fadeOut(10,function () {
$("#cabecera").load(oID).slideDown(1500);
});
});
});
});
});
</script>