如何用jquery 将table的行有特效效果隐藏， 和$('div').hide('slow')类似，

Question

如何用jquery 将table的行有特效效果隐藏， 和$('div').hide('slow')类似，好像对tr无效！

Answer 1

<style>
table,td,th{border:1px solid #cccc;}
table{
width:60%;
border-spacing:0;
border-collapse:collapse;
}
td,th{
padding:5px;
}
</style>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
$('button').toggle(function(){
$('tbody').hide(400,function(){$('button').text('show')});
},function(){
$('tbody').show(400,function(){$('button').text('hide')});
});
});
</script>
<button>hide</button>
<table>
<thead>
<th>AAAA</th><th>BBBB</th><th>CCCC</th><th>DDDD</th>
</thead>
<tbody>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
</tbody>
</table>

Answer 2

$("p").fadeIn("slow");$("p").fadeOut("slow");