jQuery 函数链接不相关的对象

Question

我当然已经搜索过我的“特定”问题的答案，但没有找到任何可以让我实现我的预期目标的东西。基本上，我希望能够将函数调用链接在一起，并能够在发出的调用之间添加“延迟”。我认为需要类似于 setTimeout() 链的东西。然而，由于这些调用是异步的，我显然不能简单地将它们链接在一起并希望得到结果。我确实看到了对内置 jQuery 队列和出队函数的引用，并认为某些东西可能基于此起作用。到目前为止，我还没有能够炮制出任何接近我的要求的东西。

我创建了一个非常基本的示例，演示了我试图通过链接实现的目标(顺便说一句 - jsfiddle 今天有点慢):

http://jsfiddle.net/jimibt/wZeTT/

这使用嵌套的 setInterval 调用，因此很糟糕并且无法扩展。我的必杀技是一个 jquery 扩展方法，具有以下语法(第一个参数是函数，第二个参数是 setTimout 值延迟):

$().chain($('#strap1').fadeIn(1300), 500)
     .chain($('#strap2').fadeIn(1300), 500)
     .chain($('#strap3').fadeIn(1300), 500)
     .start();

现在我知道jquery中有一个delay()函数，但是(据我所知)这只作为针对单个选择器的链的一部分起作用，因此不能用于将多个未连接的元素链接在一起我的例子。我确实看到了这个链接的问题，它与我所希望的很接近，但仍然没有以我想要的方式结束:

Chaining jQuery animations that affect different elements

有什么想法吗？

Answer 1

您可以像这样使用回调

$('#strap1').delay(500).fadeIn(1300,function(){
    $('#strap2').delay(500).fadeIn(1300,function(){
        $('#strap3').delay(500).fadeIn(1300);
    });
});

用法 ^[demo]

$('#strap1').delay(500).fadeIn(1300,function(){
    $('#strap2').delay(500).fadeIn(1300,function(){
        $('#strap3').delay(500).fadeIn(1300, function() {
            $('#strapline').css({
                'color': '#fff'
            }).animate({
                'color': color
            }, 3000);            
        });
    });
});