Using ajax javascript to load content into a div in web page

Question

I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq , and the contents are loaded into the div in a fade in manner. The javascript that I am using is this

$(document).ready(function(){
    $("#content").load($('.myajaxreq:first').attr('href'));
});


$('.myajaxreq').click(function() {
    var myhref=$(this).attr('href');
    $('#content').hide().load(myhref).fadeIn('slow');

    return false;
}); 

---

All works great on localhost , but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.

I think I am missing some sort of

if(content document is ready)
     then load in a fade in manner
         and so on..

Please somebody help me out here !!

Answer 1

call fade in after success callback... try this

var jContent = $('#content').hide();
jContent.load(
        myhref,
        {},
        function(){
            jContent.fadeIn('slow');
        }
    );

here the whole code (untested)

$(document).ready(function(){
    var jContent = $("#content").load($('.myajaxreq:first').attr('href'));

    $('.myajaxreq').click(function() {
        var myhref=$(this).attr('href');
        jContent
          .hide()
          .load(
            myhref,
            {},
            function(){
                jContent.fadeIn('slow');
            }
        );

        return false;
    }); 
});