JS、jQuery：如何制作链式 jQuery 动画而不是等到上一个动画完成？

Question

您可能知道，如果您使用“complete”参数将 jQuery 动画链接在一起，则每个动画仅在前一个动画完成后才会连续发生。

我有一个链，如下所示：

$('#foobar').load(url, function(){
    $(this).fadeIn(time, function(){
        $(this).scrollTop(position, time, function() {
            $(this).css({'color':'#58e'})
        });
    });
});

该链将执行如下操作：首先加载内容，然后淡入，然后滚动到顶部，最后更改 css 颜色。

我想要的是这样的：首先加载内容，然后淡入并同时滚动到顶部，最后在 fadeIn 和 scrollTop 都完成后更改颜色。

假设 scrollTop 动画的时间是 fadeIn 动画的两倍。我将在我的代码中添加什么简单的代码，以便 fadeIn 中的 scrollTop 回调不会等待 fadeIn 动画完成。像平常一样，css() 动画将等待 scrollTop 动画完成。

因此，唯一的更改（无论是什么）将影响调用 scrollTop 的 fadeIn 内的回调。我猜这可能与操纵队列有关？

感谢您的帮助！

编辑：这是安德鲁暗示的解决方案：

首先，我的原始代码按顺序加载每个自定义函数：

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
        open_box($target_open, event.value, '.wide-col', function() {
            hide_loader(function() {
                scroll_to_content($target_open);
            });
            $target_close = $target_open;
        });
    });
});

现在我希望 close_box 和 open_box 异步执行（同时），所以我将其更改为：

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap');
    open_box($target_open, event.value, '.wide-col', function() {
        hide_loader(function() {
            scroll_to_content($target_open);
        });
        $target_close = $target_open;
    });
});

现在 close_box 和 open_box动画“同时”发生。

Answer 1

将回调外部的 scrollTop 动画代码移至 fadeIn 函数：

$('#foobar').load(url, function() {
    $(this).fadeIn(time);            
    $(this).scrollTop(position, time, function() {
        $(this).css({'color':'#58e'});
    });
});