jquery - 部分 View 更改之间未保留高度空间

Question

我有一个 mvc asp.net c# 应用程序。

我有一个页面，用户可以点击一个按钮。按钮单击事件调用我的 jquery 函数，该函数使用 div.Load 方法返回局部 View 。我淡入第二个 View 。

我还在我的 _layout 文件中定义了一个永久页脚。

我注意到当用户点击按钮时第一页消失第二页淡入淡出但是，在第一页消失和第二页开始淡出之间，我的页脚跳起来填补空白。

我已经尝试在容器 div 上设置最小高度，但页脚仍然会瞬间跳起来。

我应该如何管理它？

我的 _layout 页面的重要部分:

   <div class="container body-content" style="min-width:1000px; max-width:1000px;min-height:423px;">&nbsp;
        <div id="mainContent" style="height:423px; ">
            @RenderBody()           
        </div>
        <hr />
        <footer>
            <div id="divFooter" style="font-family:DIN; font-size:14px;float:right;margin-right:50px;margin-top:50px; ">
                <img src="images/facebook.png" />
                <img src="images/linked.png" />
                <img src="images/twitter.png" />
            </div>
        </footer>
    </div>

处理转换的 jquery 脚本:

$("#divProductsBanner").click(function () {
    var url = '/Products';
      $('#mainContent').css('display', 'none');
    $('#mainContent').load(url, function () { $('#mainContent').fadeIn(1000); $('#divFooter').css('display', ''); })
    return false;
});

Answer 1

一个选择是替换 mainContent 的内容而不是隐藏它:

$("#divProductsBanner").click(function () {
    var url = '/Products';
    $('#mainContent').html("<div style='width:100px;margin-left:auto;margin-right:auto'>loading...</div>");
    $('#mainContent').load(url, function () { $('#mainContent').fadeIn(1000); })
    return false;
});