JQuery: wait for other event to finish?

Hi all,

I have this code:

$(‘a’).click(function(){
$(’#photoViewer’).fadeOut(250);
$(’#photoViewer’).attr(‘src’,‘images/albums/photo.jpg);
$(’#photoViewer’).fadeIn(250);
});

The problem is that the 3rd line fired immediately and doesn’t wait for the fade (line 2) to finish. The same applies to the fadeIn on line 4 which doesn’t wait for line 3 to finish.

Simply put: I want to fade the #photoViewer. When fully faded out, it has to start loading the new images into #photoViewer. When the new image is fully loaded and ready to display, fade #photoViewer back in.

I guess you have to do this with callbacks, but I’ve had no luck. If anyone could help, I’d appreciate it.

Thanks! Davey.