我有一段代码,它按照预期的方式工作。
function showContent(pos,direction){
$("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 2000);
$("#area").load("flow_forms.jsp #area" + pos);
$("#area").show("slide", { direction: direction }, 500);
}
$('#next').click(function(){
if(question_pos==0){
question_pos+=1;
showContent(question_pos,"right");
return true;
该区域应向左滑动,在屏幕外加载,然后从右侧滑入加载区域内容。
基本上我遇到的问题是.load在.hide之前发生。所以我所拥有的是一个区域,当它向左滑动时加载,然后从右侧引入已经加载的区域。我的老板提出了一个回调功能,但我甚至都不知道那是什么......
答案 0 :(得分:1)
你可以让.load
等到第一个动画完成后,通过使用完成回调,或者在元素的动画队列上取一个“promise”:
$("#area").hide(...).promise().done(function() {
$("#area").load(..., function() {
$(this).show(...);
});
});
实际上有一个更好的选择,它允许你在动画正在进行时启动 .load
- 这会更具响应性:
var $tmp = $('div');
var loaded = $.Deferred(function() {
$tmp.load(...); // load into an off-screen div
this.resolve();
});
var hidden = $('#area').hide(...).promise();
$.when(loaded, hidden).done(function() {
// move #tmp contents to #area and show it
$('#area').empty().append($tmp).show();
});
$.when()
要求AJAX加载和动画都已完成,同时允许它们同时进行。
答案 1 :(得分:0)
您应该使用回调函数 - 这些函数在当前函数执行完毕后运行,如下所示:
function showContent(pos,direction){
$("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 2000,
function(){
$("#area").load("flow_forms.jsp #area" + pos, function(){
$("#area").show("slide", { direction: direction }, 500);
}); // Load callback
} // Hide callback
);
}