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:

Fade out block
Insert new content
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 ); }); });

友情链接