如何逐行淡入淡出？

【问题标题】：How do I fadeIn rows one by one?如何逐行淡入淡出？
【发布时间】：2014-08-15 23:43:25
【问题描述】：

我有这段代码并且它可以工作，但我正在尝试向它添加回调，以便每一行一个接一个地淡入。现在整张桌子都在消失。

function foo() {
    for (var i = 1; i < 5; i++) {
        $(".Table tr").eq(i).fadeIn(3000);
    }
}
$(document).ready(function(){
    foo()
});

【问题讨论】：

标签： jquery

【解决方案1】：

应该这样做：

$('.Table tr').slice(0, 5).each(function(i, row) {
    setTimeout(function() {
        $(row).fadeIn(3000);
    }, 3000 * i);
});

它将每次淡入延迟 3 秒。

【讨论】：

【解决方案2】：

fadeIn 函数可以在完成时将回调作为第二个参数运行。

类似

var showNextRow = function(){
   var nextInvisibleRow = $('.Table tr').not(':visible').filter(':first');
   if( nextInvisibleRow.length > 0 ){
       nextInvisibleRow.fadeIn(3000, showNextRow); 
   }
}
showNextRow();

Working fiddle

fadeIn docs

【讨论】：