javascript - after()でfadein()jqueryが機能しない

Question

テーブルに余分な行を追加しようとしていますが、fadein() で派手にすることはできません。ご覧のとおり、最初の行にフェードイン効果を適用しています。

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);
});

次の 2 つのステートメントを組み合わせることができます。

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);
});