Animation JS，jQuery：如何使链接的jQuery动画不等待上一个动画完成？

您可能知道，如果使用“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;
    });
});

---

现在，关闭和打开对话框动画“同时”发生。

将设置

scrollTop

动画的代码移到回调之外的

fadeIn

函数：

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

---

将设置

scrollTop

动画的代码移到回调之外的

fadeIn

函数：

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

---

这难道不是很自然地让“scrollTop”在“fadeIn”之后运行吗？我理解这一点。问题是，我实际上链接了多个自定义函数，其中包含多个动画。我将回调传递给每个函数中耗时最长的动画。我可以用“next（）”绕过等待时间吗？@Pointy:

scrollTop

将在

fadeIn

之后运行，但它不会等到

fadeIn

完成后才开始运行。@andrew我所处的情况限制了我执行特定的解决方案。有什么办法用next（）吗？哦，等等，我知道了！非常感谢。这难道不是很自然地让“scrollTop”在“fadeIn”之后运行吗？我理解这一点。问题是，我实际上链接了多个自定义函数，其中包含多个动画。我将回调传递给每个函数中耗时最长的动画。我可以用“next（）”绕过等待时间吗？@Pointy:

scrollTop

将在

fadeIn

之后运行，但它不会等到

fadeIn

完成后才开始运行。@andrew我所处的情况限制了我执行特定的解决方案。有什么办法用next（）吗？哦，等等，我知道了！非常感谢。