0

我有一个 ajax 调用，它使用它在成功回调中返回的 html 填充我的页面的一部分：

function LoadCurrentCourses(masterKey, status) {
status = 'S';
$.ajax({
    type: "GET",
    url: "/Home/LoadCurrentCourses/?masterKey=" + masterKey + "&status=" + status,
    dataType: "html",
    success: function (evt) {
        $('#currentCourses').fadeIn(1500, function () { $('#currentCourses').html(evt) });
    },
    error: function (req, status, error) {
        $('#currentCourses').html("<p>Error occured retrieving current courses</p>");
    }
});

}

#currentCourses 标记只有一个标题并在其中加载 .gif。

<div class="span4 moduleBox" id="currentCourses">
    <h2>Current Courses</h2>
    <img style="margin-left: 45%; margin-top: 5%; margin-bottom: 5%;" src="~/Images/11.gif" />
</div>

ajax 是从我在 doc.ready() 上的主页调用的：

    <script>
    $(document).ready(function () {
        var masterKey = '@Model.MasterKey';

        //load degree overview
        LoadCurrentCourses(masterKey);

    });
</script>

我想要做的是返回数据之一，我希望 html 慢慢淡入主页，替换 gif 和标题。现在它工作正常，一切都加载并被替换，但我似乎无法弄清楚我应该把 jQuery .fadein() 方法放在哪里。

有任何想法吗？

4

2 回答 2

4

您应该在淡入之前加载文本

success: function (evt) {
    $('#currentCourses').html(evt);
    $('#currentCourses').fadeIn(1500);
},

您可能还需要在淡入之前淡出或隐藏该容器，否则它似乎什么都不做，只是加载新数据。

于 2013-04-08T15:13:49.533 回答
2

应该是这样的：

success: function (evt) {
    $('#currentCourses').html( evt ).fadeIn(1500);
}

填充元素后淡入，否则.html()在.fadeIn()回调中调用将导致：

fade--(fade ends)-->--(HTML applied)
于 2013-04-08T15:13:19.287 回答