Hello ! I have a jquery bug and I've been looking for hours now, I can't figure out what's wrong... I have this code :

     $(document).ready(function(){

$('#ulPhotos a').click(function() {
    var newSrc= $(this).find('img').attr('src').split("/");
    bigPictureName = 'big'+newSrc[2];

    $('#pho').hide(); 
    $('#imageBig').attr("src", "images/photos/"+bigPictureName);
    $('#pho').fadeIn('slow');

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt);
    }); 
    });

and this in html :

<ul id="ulPhotos">
    <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li>
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>

and this in for bigImage :

</div>
<div id="pho"  a name="centre">
<p id="legend"> La Reine de la Nuit</p>
  <img src="images/photos/big09.jpg" alt="Marion Baglan" id="imageBig"/> 

</div>

It simply changes the source of my img in a div named pho... but sometimes when the new image is too heavy, the fadeIn executes on the previous src !! so we see the fadeIn first on the previous image, and then, the right picture appears without fadeIn....

am I missing something?

ps : the page is here http://www.marion-baglan.net/photos.htm#centre if you click fast you can see it... and when I try to put some bigger photos, it's very obvious...