將表格行設置爲滑出或淡入？

Question

我偶然發現了這個插件

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

問題是，一切都在<tr> S和我怕你不能動畫呢？

難道真的沒有辦法嗎？ CSS或JavaScript明智。

例如我想動畫一個表tr元素。

Answer 1

也許一個解決辦法是這樣的：

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>