【问题标题】：animation delay, but start immediately on page load/function fire动画延迟，但在页面加载/功能触发时立即开始
【发布时间】：2014-06-05 00:20:40
【问题描述】：

有没有办法让我的span 标签在没有超时或间隔函数的情况下一个一个地设置动画？我可以轻松地使用密钥和 ID 来执行此操作，但这似乎不是最好的方法。这是我在小提琴示例中的内容

更新

别管原来的问题，据我所知，您需要使用delay() 函数。我唯一的问题是，如何在不使用初始动画延迟的情况下立即开始这个动画？更新了下面的代码和小提琴。

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 Example

您会注意到前两个“演职员表”几乎同时播放，而不是一次播放一个。然后最后一行需要永远显示，就好像在正确的计时器上一样。

【问题讨论】：

你说的是.delay(delay) 部分吗？要么直接忽略它，要么将delay 的初始值设置为0？
你会注意到，这就是完成的，初始值为 1000，但是这将导致两个动画开始，因为它没有足够的时间来完成第一个。

标签： jquery jquery-animate delay each

【解决方案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();
});

我们正在处理必须连续运行的代码，并且必须等待前一个完成。承诺以一种干净利落的方式处理这个问题

【讨论】：

谢谢！我没有意识到这些承诺的真正用途哈哈。有点不同，但我想我明白了。