更新

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 Example

你会注意到前两个＆＃39;信用卡＆＃39;几乎在同一时间玩，而不是一次玩。然后最后一行需要永远显示，就像在正确的计时器上一样。

Answer 1

你可以使用promises解决这个问题：

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

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

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

更新

JSFiddle Example

1 个答案: