Jquery: find a table row, fade out then fade in
<pre><code>function fncFadeRowIntoTable(pTable,pColumn,pValue, pHtml) {
// Add a row to a table in the correct place, by comparing the contents of the column passed (starts 0).
// This assumes that the table is already sorted
var counter = 0; // so we know when we've reached the end
//
pValue = rtrim(pValue);

$('#'+pTable).find('tbody tr').each(function() {
    counter++;
    if (rtrim($(this).find('td:eq('+pColumn+')').attr('id')) == pValue) { 
    //  Have we found a cell equal to the the value passed. If so, then remove the row and replace
        var $wsRow = $(pHtml);
        $wsRow.hide();
        $(this).fadeOut(1000,function() { 
            $wsRow.insertAfter($(this)).hide();
            $(this).remove();
            $wsRow.fadeIn(1000).css('display', 'table-row');
        });
        return false; // break out of each() since we're done
    }
    if (rtrim($(this).find('td:eq('+pColumn+')').attr('id')) &gt;= pValue) { 
    //  Have we found a cell greater than the value passed
        var $wsRow = $(pHtml);
        $wsRow.hide();
        $(this).before($wsRow);
        $wsRow.fadeIn(1000).css('display', 'table-row');
        return false; // break out of each() since we're done
    }
    // Handle case where we've reached the end, but we're still in the loop.
    // This means the new row is alphabetically last, so insert after
    if ($(this).closest('#'+pTable).find('tbody tr').length === counter ) {
        var $wsRow = $(pHtml);
        $wsRow.hide();
        $(this).after($wsRow);
        $wsRow.fadeIn(1000).css('display', 'table-row');
    }
});
// Handle empty table;
if ($('#'+pTable).find('tbody tr').size() == 0) {
        var $wsRow = $(pHtml);
        $wsRow.hide();
        $wsRow.appendTo('#'+pTable+' tbody');
        $wsRow.fadeIn(1000).css('display', 'table-row');
}
}
</code></pre>

<p>I have a function which I use to update rows in tables, based on matching the contents of a cell.  It will either insert a new row, or update the existing row.</p>

<p>The portion above does the replace of the row which matches.  What I want to achieve is the existing row to fade out first, then the new row to fade in.</p>

<p>What I'm getting is the new row being visible straight away, and then the old row fading out.  The .hide() doesn't appear to be effective, however, I know that .hide() is working when I'm inserting a row.</p>

<p>I've have tried the .hide() separately as 
    $wsRow.hide(); 
and also as:
    $wsRow.insertAfter($(this)).hide(); 
or as shown above, in both places.</p>

<p>Any ideas what I'm doing wrong please.  </p>

<p>Note:<br>
<strong>pHtml is a complete row; i.e. "tr.../tr" data.</strong></p>
