jQuery 运行 get 完成时的函数

Question

我正在尝试使用 jQuery 在我的应用程序中制作页面转换动画。每次我 $.get() 一个新的部分（从 HTML 文件）到我的页面时，我都试图让它滚动到位的动画。到目前为止，这是我的脚本：

function loadMain(){
    $("#homeSection").remove();
    $("#blogSection").remove();
    $.get('main.html', function(data){ 
        $('#navbar').after(data); 
    });
    $('html, body').animate({
        scrollTop: $("#homeSection").offset().top
    }, 1000);
}

我的问题是动画没有加载。请注意 $.get() 请求应该重新插入 #homeSection，最终它会出现在 DOM 中。我也在 FF 的控制台中得到这个：

TypeError: $(...).offset(...) is undefined

它指向我脚本中的 scrollTop: 行。

我很确定这与我正在尝试滚动尚不存在的内容有关，但我不确定如何滚动阻止 $.get() 的异步调用，以便仅在它存在时进行动画处理。我一直在阅读 [deferred][1] 和 [promise][2]，但这些概念让我难以理解。谁能指出我的错误并提供帮助？

Answer 1

您也应该将动画移动到成功回调中，以便在获取完成后它也会运行。

function loadMain(){
    $("#homeSection").remove();
    $("#blogSection").remove();
    $.get('main.html', function(data){ 
        $('#navbar').after(data); 
        $('html, body').animate({
            scrollTop: $("#homeSection").offset().top
        }, 1000);
    });
}

jQuery 运行 get 完成时的函数

jQuery run function when get has finished

html

jquery

asynchronous

jquery-deferred