Функция jquery ajax slide

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, и анимация были завершены, одновременно позволяя им одновременно прогрессировать.