javascript - 在两个带有淡入淡出的 div 之间切换的最佳方法是什么？

Question

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

它们切换正确，但每次我切换到另一个 div 时，首先我再次加载当前 div，然后切换到另一个。看起来像延迟。

Answer 1

您正在对服务器进行异步调用，但链中的方法会立即执行。 div 的内容只有在数据从服务器加载后才会更新。必须在Ajax调用的回调函数中加入fadein方法，使其仅在内容更新后执行。

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