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

試試這個：

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

：

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