加載之前/之後的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

您是否嘗試過的效果基本show就緒事件？

$("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(); 
     }); 
     } 
    });