JQuery: wait for other event to finish?

Asked by klaas4 (2194

) September 3rd, 2009

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.

Observing members: 0

Composing members: 0

2 Answers

JQuery uses callbacks as an argument to nearly every animation function.. It works by passing a reference to the function you wish to call in the same manner you are passing a new function with the a.click line.. Try this:

$(‘a’).click(function() { // Click Function
$(’#photoViewer’).fadeOut(250, function() { // Run this after the fade-out is done..
$(’#photoViewer’).attr(‘src’,‘images/albums/photo.jpg);
$(’#photoViewer’).fadeIn(250);
}); // close fadeOut() callback
}); // close click() callback

getsaf (26

)“Great Answer” (5

) Flag as…