我有一个 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>
正在从我的主页上的 doc.ready() 调用 ajax:
<script>
$(document).ready(function () {
var masterKey = '@Model.MasterKey';
//load degree overview
LoadCurrentCourses(masterKey);
});
</script>
我想做的是返回数据,我希望 html 慢慢淡入主页,替换 gif 和标题。现在它工作正常,所有内容都加载并被替换,但我似乎无法弄清楚应该将 jQuery .fadein() 方法放在哪里。
有什么想法吗?
最佳答案
您应该在淡入之前加载文本
success: function (evt) {
$('#currentCourses').html(evt);
$('#currentCourses').fadeIn(1500);
},
您可能还需要在淡入之前淡出或隐藏该容器,否则它看起来什么也不做,只是加载新数据。
关于javascript - 我应该将 jQuery .fade() 函数放在 ajax 成功回调中的哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15882687/