如何在需要顯示的表的隱藏行上製作slideDown動畫？

Question

我知道動畫是不可能的，除了show，hide和fade表的直接行，但如果你換表的div在細胞內有display:block這實際上是可能的。

我的問題是，它在slideUp上工作得很好，而在slideDown上工作得不錯，對於完全相同邏輯的完全相同的例子。

的邏輯很簡單：

1. 添加div來包裹表格單元格
2. 敷在格動畫
3. 隱藏/顯示錶

的行我代碼是有這樣的事情：JSfiddle

是否有任何問題，我的邏輯/代碼？謝謝！

Answer 1

我更新了你的代碼。請點擊此處查看：JSFiddle

$('body').on('click','.click2',function(e){ 
    e.preventDefault(); 
    if($('.changeable').is(':hidden')){ 
      $('.changeable div').css('display','none'); 
      $('.changeable').css('display','table-row').find('div').slideDown(1000); 
    } 
    else{ 
     $('.changeable div').slideUp(1000, function(){$('.changeable').hide()});   
    } 

Answer 2

由於這是一個風格問題，您可以使用CSS來獲得預期的效果，並使用jQuery添加一個類。這也給了一個更平滑的過渡 - jQuery的幻燈片可以在開始或結束時有點跳動。

的工作示例，請參見本琴：http://jsfiddle.net/mikemjharris/ubptawr3/

有表演類添加你需要的樣式和JS被簡化爲以下幾點：

$('body').on('click','.click2',function(e){ 
    e.preventDefault(); 
    $('.changeable').toggleClass('show')  
});