gallery question

gallery question

Hi.

I have built a photo gallery for a site using jquery.

http://synthsoundz.com/impwood/

When i click on one of the thumbnails the main image fades in.
This is fine until the browser caches the images. The when you click on the thumb the image quickly displays before fading in.

The way i have done it is that when you click on the thumb the main image fades out quickly, the image src gets swapped with the new image src and then fades back in.

So the problem is obviously that the intial fade out responds slower than the time taken to swap the image src.

Can anyone think of a way of fading out the img before the img gets swapped?

Heres my code anyway...


Thanks.

$(document).ready(function(){

   $("h2").append('<em></em>')
   
   $("#gallery-thumbs a").click(function(){
                               
   $("#img2").fadeTo(1, 0.0);
      
      var largePath = $(this).attr("href");
        var largeAlt = $(this).attr("title");
      
   $("#img2").attr({ src: largePath, alt: largeAlt }).fadeTo(1500, 1.0);
   $("h2 em").html("" + largeAlt + ""); return false;

   });
   
[/code]