General Question

klaas4's avatar

JQuery: wait for other event to finish?

Asked by klaas4 (2194points) 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

getsaf's avatar

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

klaas4's avatar

Works perfectly, thank you @getsaf and welcome to Fluther. :D

I give you your first lurve. :)

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther