Jquery fadein and out

fadeinfadeoutjquerytiming

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');
});
});

Best Answer

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.