Question

我目前正在使用文档中的.insertAfter（）函数向表中添加行。

$(document).ready(function () {

            CheckRowLength();
            $("#add").click(function () {
                $('#querytable tr:last').clone(true).insertAfter('#querytable tr:last');
                $('#querytable tr:last #name').val('');
                CheckRowLength();
                return false;
            });

            $("#del").click(function () {
                $(this).parent().parent().remove();
                CheckRowLength();
            });
            function CheckRowLength() {
                var RowCount = $('#querytable tr').length;
                if (RowCount > 2) {
                    $('#querytable tr:last #del').show();
                }
                else {
                    $('#del').hide();
                }
            }
        });

html标记

<table id="querytable">

            <tr>
                <td id="col1">
                    Field Name
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="name" id="name" />
                </td>
                <td>
                    <a id="add">Add</a>
                    <a id="del">Delete</a>
                </td>
            </tr>

    </table>

我想要获得的效果是添加行时淡入淡出。我尝试使用fadeIn（）函数但我没有正确实现它，因为没有发生任何事情。

$('#querytable tr:last').clone(true).insertAfter('#querytable tr:last').fadeIn('slow');

有人可以指出我这个效果的正确方向。或者，当与insertAfter一起使用时，这是否可行？

提前致谢

Answer 1

使用<td>包裹<div>的内容，然后将淡入淡出效果应用到该{{1}}。这是我最近写的一篇博文，其中我用幻灯片而不是淡入淡出来做同样的事情： http://duncan99.wordpress.com/2011/09/17/using-jquery-to-animate-table-rows/

Answer 2

没有你的标记，我不能肯定，但我猜你需要在添加之前隐藏它，

$('#querytable tr:last').clone(true).hide().insertAfter('#querytable tr:last').fadeIn('slow');

将不透明度从1更改为.. 1不会显示任何内容。

Answer 3

在淡入淡出之前，需要隐藏元素。尝试这样的事情：

elem = $('#querytable tr:last').clone(true);
elem.css('display', 'none');
elem.insertAfter('#querytable tr:last');
elem.fadeIn('fast')

如果使用slideDown（）或slideUp（）效果，它可能看起来更好。

Answer 4

在插入表格行时，它们应该已被隐藏，...基本上，插入<tr> with style= " display:none"，然后应用fadeIn()效果。

这笔交易是，你不能淡化已经可见的东西。

使用jQuery向表中添加行时如何应用fadeIn效果

4 个答案: