动画延迟,但在页面加载/功能激活时立即启动

Question

有没有办法在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示例

你几乎可以同时注意到前两个"学分",而不是一次一个.然后最后一行需要永远显示,就像在正确的计时器上一样.

Answer 1

你可以使用承诺来解决这个问题：

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

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