Trouble with Jquery

[blug]

Hello!

I am trying to do a simple fadein/fadeout function. Essentially, after I press a button, all the text will fade out, after all the text has faded out a whole bunch of other text will re-appear. Here is my code thus far:

PHP Code:

  function fadeout(){
        $('#div1').fadeOut('slow', function(){
           $('#div2').fadeIn('slow')}
        )
} 


The part I am mostly having trouble with is to make it so that div2 is hidden until I call upon it with fadein. Any ideas?

[VIPStephan]

Either hide it with CSS or with jQuery’s hide() function. Note that the first method should only be combined with a check if JS is enabled. I usually do it like this:

PHP Code:

$('body').addClass('jsenabled'); 


and then in the stylesheet

.jsenabled #div2 {display: none;}

If you were to use jQuery entirely then it should look like this:

PHP Code:

$('#div2').hide();
function fadeout(){
        $('#div1').fadeOut('slow', function(){
           $('#div2').fadeIn('slow')
        });
}