javascript - after() with fadein() jquery 不起作用

Question

我正在尝试将一些额外的行附加到我的表中，但无法使用淡入淡出（）。如您所见，我正在将淡入效果应用于第一行。

Jsfiddle 示例

如何将淡入淡出应用于我的其他 3 行？

我切换了方法的位置，但没有成功

$("input").click(function () {
    $("table tr:last")
        .hide()
        .after("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>")
        .fadeIn(1000);
});

Answer 1

尝试这个：

JSFiddle

$("input").click(function () {
    var rows = $("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>");
    rows.css({
        display: 'none'
    });
    $("table tr:last").append(rows);
    rows.fadeIn(1000);
});

您可以结合这两个语句：

var rows = $("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>");
rows.css({
    display: 'none'
});

至

var rows = $("<tr class=\"display: none\"><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>");

Answer 2

$("input").click(function(){
    $("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>")
       .hide()
       .insertAfter("table tr:last") // .appendTo("table tbody")
       .fadeIn(1000);
});