为表格行设置动画以使其滑出或淡入？

Question

I stumbled upon this plugin

https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/customization.html

the problem is, everything is in <tr> s and I fear you cannot animate them?

Is there really no way? CSS or javascript wise.

eg I want to animate a tables tr elements.

Answer 1

Maybe one solution could be like that :

 var animate = function(evt) { //we go to the 'tr' tag $el = $(evt.currentTarget).parent().parent(); //we hide the 'td's tag $el.find('td').hide(333 , function(){ // we reduce the height of 'tr' tag $el.animate({height : 0} , 777) }); } $('button').click(animate); 

 table { border: solid 1px #AAA; padding: 3px; border-collapse: separate; } td { height: 50px; margin : 3px; min-width : 50px; border: solid 1px orange; } tr { height : 55px; padding : 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>a</td><td>b</td><td><button>hide</button></td> </tr> <tr> <td>a</td><td>b</td><td><button>hide</button></td> </tr> <tr> <td>a</td><td>b</td><td><button>hide</button></td> </tr> </table>