我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。

有什么解决办法吗?

代码如下:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

当前回答

我想滑动整个身体,我已经通过结合褪色和滑动效果来管理这个问题。

我已经完成了3个阶段(第2步和第3步被替换,以防你想向下或向上滑动)

给身体指定高度, 褪色所有td和th, tbody下滑。

slideUp的例子:

tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});

其他回答

我简单地动态包装tr,然后删除它一旦slideUp/slideDown已经完成。这是一个非常小的开销添加和删除一个或两个标签,然后删除它们一旦动画完成,我没有看到任何可见的延迟。

SlideUp:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){
  
  $(this).parent().parent().remove();
    
 });

SlideDown:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){
  
  var $set = $(this);
  $set.replaceWith($set.contents());
    
 });

我不得不向fletchzone.com致敬,因为我拿走了他的插件,并将其剥离到上面。

有一个表行嵌套表:

<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>

向下滑动行:

$('.dummyRow').show().find("table").slideDown();

注意:行和它的内容(这里是“table”)都应该在动画开始之前被隐藏。


上滑行:

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

第二个参数(function())是一个回调。


简单! !

请注意,还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。

这段代码有效!

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <title></title>
        <script>
            function addRow() {
                $('.displaynone').show();
                $('.displaynone td')
                .wrapInner('<div class="innerDiv" style="height:0" />');
                $('div').animate({"height":"20px"});
            }
        </script>
        <style>
            .mycolumn{border: 1px solid black;}
            .displaynone{display: none;}
        </style>
    </head>
    <body>
        <table align="center" width="50%">
            <tr>
                <td class="mycolumn">Row 1</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 2</td>
            </tr>
            <tr class="displaynone">
                <td class="mycolumn">Row 3</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 4</td>
            </tr>
        </table>
        <br>
        <button onclick="addRow();">add</button>    
    </body>
</html>

如果你需要同时滑动和淡出一个表行,尝试使用这些:

jQuery.fn.prepareTableRowForSliding = function() {
    $tr = this;
    $tr.children('td').wrapInner('<div style="display: none;" />');
    return $tr;
};

jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
    $tr = this;
    if ($tr.is(':hidden')) {
        $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    } else {
        $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
            $tr.hide();
            callback();
        });
    }
    return $tr;
};

$(document).ready(function(){
    $('tr.special').hide().prepareTableRowForSliding();
    $('a.toggle').toggle(function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Hide table row');
        });
    }, function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Display table row');
        });
});
});

像这样选择行内容:

$(row).contents().slideDown();

.contents () - 获取匹配元素集中每个元素的子元素,包括文本节点和注释节点。