Transición imagen

[aalleexx81]

Hola a todos.

Estoy aprendiendo a utilizar Jquery.

Tengo implementado un ejemplo de un carrusel de imágenes. El código es muy sencillo, es el siguiente:

Código PHP:

  $(document).ready(function(){ 
 
 
    $("#divCentro ul li a").click(function() {     
        var largePath = $(this).attr("href"); 
        var largeAlt = $(this).attr("title"); 
         
        $("#largeImg").animate({opacity: "0.1", height: "0", width: "0"}, 1500) 
        $("#largeImg").attr({ src: largePath, alt: largeAlt }); 
        $("#largeImg").animate({opacity: "1",  height: "360", width: "480"}, 1500) 
     
        return false; 
    }); 
});  
   

La transición se realiza al cambiar la ruta de la imagen con id=largeImg.

Mi intención es que la primera animación se realice con la imagen actual, y al terminar la animación se cargue la nueva imagen y comience la segunda animación.

El problema es que cuando se ejecuta el código las dos animaciones se hacen con la nueva imagen.

He probado varias opciones pero no consigo solucionarlo.

¿Alguna sugerencia?

Muchas gracias a tod@s de antemano.

Saludos.