.animate回调在其他.animate加载2次

Question

我想这样做：

1. 从顶部滚动到440
2. 使用动画
打开#detail
3. 在id.html
中加载#detail
4. 在此HTML内容上制作了CSS动画

我想一步一步地做到这一点：

步骤2 /在步骤1 /

之后执行

步骤3 /在步骤2 /

之后执行

步骤4 /在步骤3 /

之后执行

但我有一个问题：我的.load函数执行了两次。我不明白为什么。

$('html,body').animate({scrollTop:(440)}, 1300,'easeInSine', function() {
    $('#detail').animate({height: detail_height}, 800, function() {
        $('#detail').load('pages/web/' + id + '.html', function() {
            //do something
    });
    });
});

Answer 1

当您为n元素设置动画时，回调将发生n次。这是预期的行为。

如果您希望获得动画多个元素的单个回调，请使用promise对象。

$('html,body').animate({scrollTop:(440)}, 1300,'easeInSine').promise().done(function() {
    $('#detail').animate({height: detail_height}, 800, function() {
        $('#detail').load('pages/web/' + id + '.html', function() {
            //do something
        });
    });
});

另一种方法是只选择html或body，而不是两者。