Jquery fadein and out

Question

Check this out: http://novarose.co.cc/web2/

Fade effects are kinda messed up and I do not how to make then work properly.

I want code to run in following sequence:

1. Fade out block
2. Insert new content
3. Fade in block

My jQuery code for that page:

$('#navigation a').click(function(){ $.get("page.php", { page: $(this).attr('id') }, function(data){ $('#content').fadeOut('slow').html(data).fadeIn('slow'); }); });

Answer 1

Your problem is here: $('#content').fadeOut('slow').html(data).fadeIn('slow'); }); This starts the fadeIn before the fadeOut is done. You want to do this:

$('#content').fadeOut('slow', function(){
  $(this).html(data).fadeIn('slow')
});

The second argument to fadeOut is a function to be called after fadeOut is finished.

Answer 2

You could move the fade out to before the ajax call:

$('#navigation a').click(function(){ $('#content').fadeOut('slow'); $.get("page.php", { page: $(this).attr('id') },
    function(data){ $('#content').html(data).fadeIn('slow'); }); });