[jQuery] Need help with easy fix for image gallery

[jQuery] Need help with easy fix for image gallery


Extremely new to jQuery so I am sure this is an easy fix for some of
you advanced players out there. Thanks in advance.
Creating a photo gallery and want the currently displayed image to
fade away before the new image fades in...this is the code I have thus
far.
$("#imageSelect li a").click(function(){
    var imagePath = $(this).attr("href");
    $("#mainImg img").animate({opacity: "hide"}, 500).attr({ src:
imagePath }).animate({opacity: "show"}, 500);
    return false;
});
The main issue is that the new image is grabbed and displayed before
the hide animation can complete, so you see it right away, then it
fades away...and then reappears a half second later. Any suggestions?