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（）函数，但这只能（据我所知）作为针对单个选择器的链的一部分，因此不能用于将多个未连接的元素链接在一起我的例子。我确实看到了这个与我希望的相关的SO问题，但仍然没有按照我想要的方式结束：

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);            
        });
    });
});

Answer 2

您可以使用delay和queue方法链接动画：

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

演示：http://jsfiddle.net/Guffa/8QZcN/

jQuery函数链接不相关的对象

2 个答案: