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

Question

我知道除了 show、hide 和 fade 之外，在 table 的直接行上动画是不可能的，但如果你换行，这实际上是可能的table 在 div 和 display:block 中的单元格。

我的问题是它在 slideUp 上运行良好，但在 slideDown 上运行不正常，因为完全相同的示例具有完全相同的逻辑。

逻辑很简单：

添加 div 包裹 table 单元格
在 div
hide/show行table

我的代码是这样的：JSfiddle

我的logic/Code有什么问题吗？谢谢！

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 添加一个 class。这也提供了更平滑的过渡 - jquery 幻灯片在开始或结束时可能有点跳动。

请参阅此 fiddle 以获取工作示例：http://jsfiddle.net/mikemjharris/ubptawr3/

有一个节目class添加了你需要的样式，js简化如下：

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

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

How to make slideDown animation on a hidden row of table that needs to be shown?

javascript

jquery

html

slidedown