Search code examples
jqueryfadeinfadefadeout

Load content into a div onclick - FadeOut(), FadeIn()

I have a simple menu with <ul>s. Every <ul> loads its content into a <div> on clicking it.

Here's my code: http://jsfiddle.net/EPvGf/16

So to be able to understand my problem, when you first open the page try to click any <ul> (instead of the default one "description"). You can see the content that should be loaded (faded in) goes under the content that was before it and when the old content finishes fading out the new content that fades in goes up to take the old content's place.

What I want is that when the old content FULLY disappears off the page, the new content appears in its place and not under each other then one gets the place of the second.

Solution

  • This is where you need to make use of the complete callback in the fadeout method:

    $('.pbox:visible').fadeOut('slow', function(){
    $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow'); //After everything has been faded out fade in the corresponding div.
});

    Demo

    Plus you may want to add this on document ready

     $('.pbox:gt(0)').hide();  // hide everything but the first one first up.

    and get rid of

    .find('a:first').click();

    Demo