[英]where do i put jQuery .fade() function in ajax success callback?
I have an ajax call that is populating a portion of my page with the html it returning in the success callback: 我有一个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>");
}
});
} }
the #currentCourses markup just has a header and loading .gif in there. #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>
The ajax is being called from my main page on doc.ready(): 我在doc.ready()的主页上调用了ajax:
<script>
$(document).ready(function () {
var masterKey = '@Model.MasterKey';
//load degree overview
LoadCurrentCourses(masterKey);
});
</script>
What I am trying to do is one the data gets returned I would like the html to slowly fade in to the main page, replacing the gif and header. 我想做的是返回一个数据,我希望html慢慢淡入主页,替换gif和标头。 Right now it works fine, everything loads, and is replaced, but I can't seem to figure out where I should put the jQuery .fadein() method.
现在它可以正常工作,所有内容都可以加载,并且可以替换,但是我似乎无法弄清楚应该在哪里放置jQuery .fadein()方法。
Any ideas? 有任何想法吗?
You should load the text before fading in 您应在淡入之前加载文本
success: function (evt) {
$('#currentCourses').html(evt);
$('#currentCourses').fadeIn(1500);
},
You may also need to fadeout or hide that container before fading in, or it will appear to do nothing and just load the new data. 在淡入之前,您可能还需要淡出或隐藏该容器,否则它似乎什么也不做,只是加载新数据。
Should be like: 应该是这样的:
success: function (evt) {
$('#currentCourses').html( evt ).fadeIn(1500);
}
Fade in after the element is populated, otherwise calling .html()
inside the .fadeIn()
callback will result in: 在元素填充后淡入,否则在
.fadeIn()
回调内调用.html()
会导致:
fade--(fade ends)-->--(HTML applied)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.