CODEWITHSUNDEEP
javascriptjquery
user2257991
user2257991

Reputation: 271

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

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

Upvotes: 3

Views: 205

Answers (2)

Ram
Ram

Reputation: 144699

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

Upvotes: 3

Vimal Stan
Vimal Stan

Reputation: 2005

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

Upvotes: 3

Related Questions