Vinny提供的插头非常接近，但我发现并修复了一些小问题。

It greedily targeted td elements beyond just the children of the row being hidden. This would have been kind of ok if it had then sought out those children when showing the row. While it got close, they all ended up with "display: none" on them, rendering them hidden. It didn't target child th elements at all. For table cells with lots of content (like a nested table with lots of rows), calling slideRow('up'), regardless of the slideSpeed value provided, it'd collapse the view of the row as soon as the padding animation was done. I fixed it so the padding animation doesn't trigger until the slideUp() method on the wrapping is done. (function($){ var sR = { defaults: { slideSpeed: 400 , easing: false , callback: false } , thisCallArgs:{ slideSpeed: 400 , easing: false , callback: false } , methods:{ up: function(arg1, arg2, arg3){ if(typeof arg1 == 'object'){ for(p in arg1){ sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){ sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == 'string'){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == 'function'){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == 'undefined'){ sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == 'function'){ sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).children('td, th'); $cells.wrapInner('<div class="slideRowUp" />'); var currentPadding = $cells.css('padding'); $cellContentWrappers = $(this).find('.slideRowUp'); $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){ $(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, { complete: function(){ $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents()); $(this).parent().css({ 'display': 'none' }); $(this).css({ 'padding': currentPadding }); } }); }); var wait = setInterval(function(){ if($cellContentWrappers.is(':animated') === false){ clearInterval(wait); if(typeof sR.thisCallArgs.callback == 'function'){ sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } , down: function (arg1, arg2, arg3){ if(typeof arg1 == 'object'){ for(p in arg1){ sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){ sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == 'string'){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == 'function'){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == 'undefined'){ sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == 'function'){ sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).children('td, th'); $cells.wrapInner('<div class="slideRowDown" style="display:none;" />'); $cellContentWrappers = $cells.find('.slideRowDown'); $(this).show(); $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); }); var wait = setInterval(function(){ if($cellContentWrappers.is(':animated') === false){ clearInterval(wait); if(typeof sR.thisCallArgs.callback == 'function'){ sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } } }; $.fn.slideRow = function(method, arg1, arg2, arg3){ if(typeof method != 'undefined'){ if(sR.methods[method]){ return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } } }; })(jQuery);

我对所有其他的解决方案都有问题，但最后还是做了这个简单的事情，非常顺利。

像这样设置你的HTML:

<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>

然后像这样设置你的javascript:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

基本上，让“隐形”行高0px，里面有一个div。 使用div(不是行)上的动画，然后设置行高为1px。

为了再次隐藏行，在div上使用相反的动画，并将行高设置为0px。

如果你把行中的td设置为不显示就可以了同时你开始动画行的高度

tbody tr{
    min-height: 50px;
}
tbody tr.ng-hide td{
    display: none;
}
tr.hide-line{
    -moz-transition: .4s linear all;
    -o-transition: .4s linear all;
    -webkit-transition: .4s linear all;
    transition: .4s linear all;
    height: 50px;
    overflow: hidden;

    &.ng-hide { //angularJs specific
        height: 0;
        min-height: 0;
    }
}

在表行上不支持动画。

来自Chaffer和Swedberg的“学习jQuery”

表行显示特定的 动画的障碍，因为浏览器 使用不同的值(table-row和 块)用于它们的可见显示 财产。.hide()和.show() 方法，没有动画，总是 用于表行是安全的。的 jQuery 1.1.3版本，.fadeIn()和 . fadeout()也可以使用。

你可以把td的内容包装在一个div中，并在上面使用滑动。您需要决定动画是否值得额外的标记。

我通过使用行中的td元素来解决这个问题:

$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);

动画行本身会导致奇怪的行为，主要是异步动画问题。

对于上面的代码，我突出显示了在表中拖放的一行，以突出显示更新已经成功。希望这能帮助到一些人。

我回答这个问题有点落后了，但我找到了一种方法来做到这一点:)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

我只是在表格数据标记中放了一个div元素。当它被设置为可见时，随着div展开，整行就会下降。 然后告诉它渐隐(然后超时，以便您看到效果)，然后再次隐藏表行:)

希望这能帮助到一些人!