在表格中显示新行的延迟效果

Question

我做了一个jsfiddle让我更容易解释。 （http://jsfiddle.net/FPznm/）。我想要做的是当你点击表格末尾的“Visa mer”按钮时，我希望隐藏的行能够延迟淡入。

它现在不起作用，我不知道为什么。 （请参阅jsfiddle上的Javascript窗口）。

问题是，如果我在.delay()之前添加一个.fadeIn()，fadeIn()效果会消失，但它们仍会显示出来。

  for (i = 0; i <= increaseBy; i++) {
        hidden.eq(i).delay(i * 20).fadeIn(500);
        hidden.eq(i).removeClass("hidden");
    }

这是麻烦所在的代码。我认为.eq()正在使它无法正常工作。

Answer 1

问题是动画是异步的，因此您可以立即删除该类

试试这个......请注意表行不能很好地生成动画

$("td.showMore").on('click', function() {
        var hidden = $("tr.hidden"),
            increaseBy = 5;
        for (i = 0; i <= increaseBy; i++) {
            hidden.eq(i).delay(i * 200).fadeIn(1000, function(){ 
                   $(this).removeClass("hidden");
            });

        }
    });

编辑：还要注意你的20的延迟是20毫秒，这是1/50秒，人眼甚至无法注册

Answer 2

你需要删除这一行：hidden.eq(i).removeClass("hidden");

fadeIn是异步的：内部它可能与setTimeout或setInterval合作。您已经指定在500毫秒后完成fadeIn，但是之后立即删除hidden类（无需等待500毫秒通过）

如果您需要在fadeIn完成后更改类或执行其他操作，则可以提供对fadeIn的回调，该回调将在动画完成后执行。有关详细信息，请参阅：http://api.jquery.com/fadeIn/

Answer 3

这是因为removeClass比fadeIn方法执行得更快，你可以在动画完成时删除该类。

hidden.eq(i).delay(i * 20).fadeIn(500, function(){
    hidden.eq(i).removeClass("hidden");
});

http://jsfiddle.net/k28WT/

如果你想用hidden类选择前5个元素你可以使用:lt选择器：

$(document).ready(function() {
    $("td.showMore").on('click', function() {
        $("tr.hidden:lt(5)").each(function(i){
            $(this).delay(i + 200).fadeIn(500, function(){
               $(this).removeClass('hidden')
            })
        })
    });
});

http://jsfiddle.net/vex3R/

Answer 4

我创造了一个小提琴，解释了我的答案：http://jsfiddle.net/3leven11/FPznm/5/

你需要做的就是：

$(document).ready(function() {
    $("td.showMore").on('click', function() {
        var increaseBy = 5;
        $("tr.hidden").each(function(index, elem) {
            if (index <= increaseBy) {
                $(elem).delay(index * 20).fadeIn(500, function() {$(elem).removeClass('hidden');});
            }
        });
    });
});​