Question

I’ve seen a few posts on this, but none with a solution that works for me – and I’ve tried a lot. I’m just executing a simple sequence – fade div out, load content, fade dive in, but the content that is loaded appears for a moment in full opacity and then disappears, then executes the fade. I’ve tried setting the display property of the loaded div to none and then showing it in the fade in function, setting delays, for showing, etc. I’ve tried fadeTo, fadeOut, etc. Incidentally, hide() works fine, but it’s not the effect I want.

Here’s my code:

…

$('#bio_container').fadeOut(500,loadContent(ident));
});

function loadContent(ident){
    $('#bio_container').load('/index.php/ajax/bios/' + ident,showContent);
}

function showContent(){
    $('#bio_container').fadeIn(500);
}

Any ideas would be appreciated.

Answer 1

Try this.

$('#bio_container').fadeOut(500, function(){
     loadContent(ident)
});

Edit: If you look at fadeOut’s definition it accepts a callback as an argument and invokes that function when the animation has finished. So a callback reference is either an inline function definition like the above one or just a function name without paranthesis. If you give something like this someFunction() it evaluates the function and then takes the return value as an argument. And possibily throws a suppressed exception when the animation is finished and invoking the result.