jQuery动画加载前后顺序

jQuery animation order before/after load

本文关键字：顺序 加载 动画 jQuery      更新时间：2023-09-26

我试图在加载新内容之前滑动我的主容器#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;
    }
});

你试过了吗:

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

您是否尝试过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();
         });
       }
    });
相关文章：