Question

I am currently adding rows to a table using the .insertAfter() funciton within my document.

$(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 markup

<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>

The effect I would like to obtain is when the row is added have it fade in. I tried to use the fadeIn() function but I am not implementing it correctly as nothing is happening.

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

Can someone please point me in the right direction for this effect. Or is this even possible when used in conjunction with insertAfter?

Thanks in advance

Answer 1

Wrap the contents of your <td>‘s with a <div>, which you then apply the fade effects to. Here’s a blog post I wrote recently where I was doing the same thing with slide instead of fade:
http://duncan99.wordpress.com/2011/09/17/using-jquery-to-animate-table-rows/