jquery - Ajax：仅在完全加载时淡入新内容

Question

我不知道这种技术是否错误，但我真的只希望新内容在满载时淡入。似乎 beforeSend 和 complete send 对时间没有影响。甚至在上滑发生之前，新内容就会淡入淡出，fe。

我对 ajax 还不是很熟悉，你必须知道。

这是我的代码：

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            beforeSend: function() {    
                $(".menue").slideUp();
            },
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $('#content').html(html);

            },
            complete: function(){
                $("#content").fadeIn(); 
            }
        });
    }

    $('nav a').live('click', function(e){
        history.pushState(null, null, this.href);   
        replacePage(this.href);
        e.preventDefault();
    $("#content").hide();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

Answer 1

尝试以下操作：

success: function(data){
           var dom = $(data);
           var html = dom.filter('#content').html();
           $(".menue").promise().done(function(){
                $('#content').html(html).fadeIn()
           })
        },

或者您可以使用slideUp()动画完成后执行的回调函数：

$(".menue").slideUp('slow', function(){
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        success: function(data){
            var dom = $(data);
            var html = dom.filter('#content').html();
            $('#content').html(html).fadeIn()
        }
    });
 })

请注意，live()已弃用，您可以改用on()方法。

Answer 2

将 ajax 调用中的成功函数更改为：

success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();
                $('#content').html(html).hide().fadeIn();
            },

请记住从完整的调用中删除fadeIn()。