How to apply a fadeIn effect when adding rows to a table using jQuery
<p>I am currently adding rows to a table using the .insertAfter() funciton within my document.</p>

<pre><code>$(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 &gt; 2) {
                    $('#querytable tr:last #del').show();
                }
                else {
                    $('#del').hide();
                }
            }
        });
</code></pre>

<p>html markup</p>

<pre><code>&lt;table id="querytable"&gt;

            &lt;tr&gt;
                &lt;td id="col1"&gt;
                    Field Name
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;input type="text" name="name" id="name" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;a id="add"&gt;Add&lt;/a&gt;
                    &lt;a id="del"&gt;Delete&lt;/a&gt;
                &lt;/td&gt;
            &lt;/tr&gt;

    &lt;/table&gt;
</code></pre>

<p>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. </p>

<pre><code>$('#querytable tr:last').clone(true).insertAfter('#querytable tr:last').fadeIn('slow');
</code></pre>

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

<p>Thanks in advance</p>
