有没有办法在没有超时或间隔功能的情况下逐个动画我的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;
});
});
你几乎可以同时注意到前两个“学分”,而不是一次一个.然后最后一行需要永远显示,就像在正确的计时器上一样.
最佳答案
你可以使用promises解决这个问题：
var credits = $('#credits'),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();
});
我们正在处理必须在一系列中运行的代码,并且必须等待前一个完成.承诺以一种干净利落的方式处理这个问题
