CODEWITHSUNDEEP
ajaxjquery
mheavers
mheavers

Reputation: 30158

jquery flicker on load in conjunction with fadeTo

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.

Upvotes: 0

Views: 447

Answers (2)

Yiğit Yener
Yiğit Yener

Reputation: 5986

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.

Upvotes: 1

FxckDead
FxckDead

Reputation: 440

It's happend, because javascript is executed in lineal form, and fadeOut(time,fn) execute the fn and THEN execute te fade.

To fix this i use some JQuery plugins, for your case i suggest this simple slideshow, or if you are looking for something more specific see this list.

PS: Sorry for my bad english.

Upvotes: 0

Related Questions