Load page and fade in or out ajax html

Question

Hi i am working on a simple mobile site and i am looking to have it load a diffrent page depending on the link the user clicks but i am having some problems

i want to loads a page like so

    ../user/index.php

and i can do this like so

     $("demo").load("../user/index.php")

is there a proper way todo this with just ajax that would let me know wen its been loaded??

also i want it to fade in this content to a div witch i have found out how todo but i am wondering how can i make it fade out content that is all ready in the div before fading in the new content ?

i am fading in my content like so

    <script>
 function fadeToggle(){
        $("#demo").fadeToggle("slow");
    });

}

right now i have it fading in a box and fading it out on click but i then need to click again to get it to fade back in

i am looking for a way to have it fade in content on page load then wen user clicks link fade out set content load new content check for succsess and then fade in new content any help would be greate

Answer 1

Possibly something like this:

$('#demo').fadeOut('slow').load("../user/index.php", function() {
  $(this).fadeIn('slow');
});