Question

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

它现在不起作用，我不知道为什么。（参见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

因为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 2

我创造了一个小提琴，解释了我的答案：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');});
            }
        });
    });
});

Answer 3

问题是动画是异步的，所以你要立即删除课程

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

$("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 4

您需要删除此行：hidden.eq(i).removeClass("hidden");

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

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

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

4 个答案: