title: Jquery: find a table row, fade out then fade in
body: <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>