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

加载前/后的jQuery动画顺序

2 个答案: