Question

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

我有一个链，像这样：

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

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

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

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

所以唯一的变化（无论它可能是什么）都会影响调用fadeIn的{{1}}内的回调。我猜它可能与操纵队列有关吗？

感谢您的帮助！

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

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

scrollTop

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

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动画会在“同一时间”发生。

Answer 1

将在回调之外设置scrollTop动画的代码移动到fadeIn函数：

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

JS，jQuery：你如何制作一个链式jQuery动画，不要等到上一个动画完成？

1 个答案: