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加載和動畫都已完成，同時允許它們同時進行。