jQuery Порядок анимации до/после загрузки

Question

Я пытаюсь сместить мой основной контейнер #main перед загрузкой нового содержимого внутрь, а затем сползаю вниз, когда загрузка будет завершена. Кажется, что это работает при первом щелчке, но при последующих щелчках контент загружается мгновенно перед началом анимации slideUp и slideDown.

$("#access a").address(function() { 
    $("div#main").slideUp(1111).delay(1200).load($(this).attr('href') + ' #menudropdown, #contentbody', function(){ 
     $("div#main").slideDown(1111);   
    }); 

    var current = location.protocol + '//' + location.hostname + location.pathname; 
    if (base + '/' != current) { 
     var diff = current.replace(base, ''); 
     location = base + '/#' + diff; 
    } 
}); 

Answer 1

Вы пробовали:

$("#access a").address(function() { 
    var mainDiv = $("div#main"); 
    var loadLink = $(this).attr('href'); 
    mainDiv.slideUp(1111,function(){ 
     mainDiv.load(loadLink + ' #menudropdown, #contentbody', function(){ 
      mainDiv.slideDown(1111); 
     });  
    }); 
    // your other code 
}); 

Answer 2

Пытались ли вы готовый событие на slideUp?

$("div#main").slideUp(1111, function() { 
    $(this).load($("#access a").attr('href') + ' #menudropdown, #contentbody', function(){ 
    $("div#main").slideDown(1111); 
    }); 
}); 

Кроме того, я хотел бы предложить, чтобы скрыть содержимое перед загрузкой с помощью полной функции Ajax:

$.ajax({ 
     url: $("#access a").attr('href'), 
     success: function (data) { 
     $("div#main").slideUp(function() { 
      $(this).hide().empty().append(data.find('#menudropdown, #contentbody')).slideDown(); 
     }); 
     } 
    });