after() with fadein() jquery doesn't work

Question

I am trying to append some extra rows to my table, but can't make it fancy with fadein(). As you can see mine is applying the fade in effect to the very first row.

Jsfiddle example

How can I apply the fadein to my other 3 rows??

I switched the places of the methods, but no success

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

Try this:

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

You can combine these two statements:

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

to

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