动画延迟，但在页面加载/函数启动时立即启动

Question

有没有一种方法可以在没有超时或间隔功能的情况下逐个动画化我的span标记？我可以很容易地使用钥匙和身份证来做到这一点，但这似乎不是最好的方法。这是我在小提琴的例子

更新

不管最初的问题是什么，据我所知，您需要使用delay()函数。我唯一的问题是，在不使用初始动画的延迟的情况下，如何立即启动动画？更新了下面的代码和fiddle。

var credits = $('#credits'),
    container = credits.parent(),
    conPos = container.position(),
    creditsText = credits.find('span'),
    first = 0;
    delay = 1000,
    count = creditsText.length;
container.fadeIn('slow', function() {
    creditsText.each(function() {
        $(this).css({
                    'top': ( conPos.top - $(this).height() ),
                    'left': ( ( ( conPos.left + container.width() ) - $(this).width() ) / 2 )
                    }).delay(delay)
                .animate({
                            'top': ( ( ( conPos.top + container.height() ) - $(this).height() ) / 2 ),
                            'opacity': '1.0'
                        }, 
                        {
                            duration: 4000,
                            complete: function() {
                                $(this).fadeOut(5000);
                            }
                        });
        if ( first == 1 ) {
            delay = 9000;
        }
        first++;
        delay += delay;
    });
});

JSFiddle示例

你会注意到前两个"学分"几乎同时播放，而不是一次播放一个。然后最后一行需要很长时间才能显示，就好像在正确的计时器上一样。

Answer 1

您可以使用promise解决此问题：

http://jsfiddle.net/EKd99/1/

var credits = $('#credits'),
    container = credits.parent(),
    conPos = container.position(),
    creditsText = credits.find('span'),
    first = 0;
    delay = 1000,
    count = creditsText.length;
container.fadeIn('slow', function() {
  function next() {
    var span = $(creditsText.get(first));
    if (!span) return;
    $.when(
      span
      .css({
        'top': ( conPos.top - span.height() ),
        'left': ( ( ( conPos.left + container.width() ) - span.width() ) / 2 )
      })
      .animate({
        'top': ( ( ( conPos.top + container.height() ) - span.height() ) / 2 ),
        'opacity': '1.0'
      }, { duration: 4000}
      )
    ).then(function(){
      return span.fadeOut(5000);
    }).then(next);
    first++;
  }
  next();
});

我们处理的代码必须在一个系列中运行，并且必须等待前一个系列完成。promise以一种干净的方式处理这个问题