Question

I call those functions on href:

function LoadDiv1() {
       var uri = '@this.Routes().Parts.Div1.FullUrl(Model.SignedInUser.User.Id)';
       $('#home_content').load(uri).css("display", "none").fadeIn(500);
}
function LoadDiv2() {
       var uri = '@this.Routes().Parts.Div2.FullUrl(Model.SignedInUser.User.Id)';
       uri = uri.replace('amp;', '');
       $('#home_content').load(uri).css("display", "none").fadeIn(500);
}

They switch correctly, but every time i switch to another div, first of all i get current div loaded again, and then switched to another. It looks like delay.

Answer 1

You’re making an asynchronous call to the server but the methods in the chain are executed immediately. The div’s contents are updated only later when the data has been loaded from the server. You must add the fadein method to the callback function of the Ajax call so that it executes only after the contents have been updated.

$('#home_content').css("display", "none").load( uri, 
    function() { $( '#home_content' ).fadeIn(500) } );