在两个带有衰落的div之间切换的最佳方法是什么？

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