jquery ajax幻灯片功能

Question

我有一段代码，工作的方式，它应该。

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之前。所以我所拥有的是一个区域，它会在向左滑动时加载，然后从右侧引入已加载的区域。我的老板建议了一个回调函数，但我甚至不知道那是什么...

Answer 1

你应该利用回调函数 - 这些曾经当前函数执行完毕，像这样的运行：

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    
    ); 
} 

Answer 2

您可以让.load等到第一个动画完成时，通过使用完成回调或通过“承诺“在元素的动画队列：

$("#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加载和动画都已完成，同时允许它们同时进行。