动画表行以滑出或淡入？

Question

我偶然发现了这个插件

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

问题是，一切都在<tr>中，我担心你无法为它们制作动画？

真的没办法吗？ CSS或javascript明智。

e.g。我想为表格tr元素设置动画。

Answer 1

也许一个解决方案可能是这样的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;