Javascript 带fadein（）的after（）jquery不'；行不通

我正在尝试向表中添加一些额外的行，但无法使用fadein（）使其更美观。 正如您所看到的，我的正在对第一行应用淡入效果

如何将fadein应用于其他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);
});

$（“输入”）。单击（函数（）{
$（“表tr:last”）
.hide（）
.之后（“第二行第三行第四行”）
.fadeIn（1000）；
});

试试这个：

$（“输入”）。单击（函数（）{
变量行=$（“第二行第三行”）；
rows.css({
显示：“无”
});
$（“表tr:last”）.append（行）；
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=$（“secondrowsthirdrowforthrow”）；
rows.css({
显示：“无”
});

到

var rows=$（“secondrowsthirdrowforthrow”）；
$（“输入”）。单击（函数（）{
$（“第二行第三行”）
.hide（）
.insertAfter（“表tr:last”）/.appendTo（“表tbody”）
.fadeIn（1000）；
});
Hmm，我以前从未见过这种结构，将字符串放在jquery中并使用它。非常感谢你的帮助
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>");

$("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);
});