javascript - after() 与 fadein() jquery 不工作

Question

我正在尝试将一些额外的行附加到我的表中，但无法使用 fadein() 使它看起来很漂亮。如您所见，我正在对第一行应用淡入淡出效果。

Jsfiddle example

如何将淡入淡出应用到我的其他 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>");