加载之前/之后的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(); 
     }); 
     } 
    });