如何在需要显示的隐藏行表上制作slideDown动画？

Question

我知道除了show，hide和fade之外，在表的直接行上无法生成动画，但如果将表格的单元格包装在内部，这实际上是可行的一个div，display:block。

我的问题是，它在slideUp上工作得很好，并且没有在slideDown上使用相同逻辑的完全相同的示例。

逻辑非常简单：

1. 添加div以包装表格单元格
2. 在div上应用动画
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/

有一个show类可以添加你需要的样式，js简化为以下内容：

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