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