javascript - jQuery animation order before/after load

Question

I am trying to slide my main container #main up before loading the new content inside and then slide down again when the load is complete. This seems to work on the first click but on subsequent clicks the content loads instantly before the slideUp and slideDown animations begin.

$("#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 上的 ready 事件？

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