jquery - .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，而不是两者。