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（...）未定义

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

我很确定这与我试图滚动尚未的东西有关，但我不确定关于如何阻止$.get()的异步调用，以便仅在其存在时进行动画处理。我一直在[deferred][1]和[promise][2]上阅读，但这些概念让我望而却步。有人能指出我的错误并帮忙吗？

Answer 1

您应该将动画移动到成功回调中，这样它也会在get完成后运行。

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

get完成后jQuery运行函数

1 个答案: