title: Animating adding a table row (JavaScript + jQuery)
body: <p>I've written some code to add a table row which you can see below.</p>
  
  <pre><code>function addRow(pos) {
  
  // Insert new HTML table row
  var tblObj = document.getElementById('questionTbl');
  var newRow = tblObj.insertRow(pos + 1);  
  
  // Add new table cells
  var newCell1 = newRow.insertCell(0);
  newCell1.innerHTML = 'one';
  
  var newCell2 = newRow.insertCell(1);
  newCell2.innerHTML = 'two';
  
  var newCell3 = newRow.insertCell(2);
  newCell3.innerHTML = 'three';
  
  var newCell4 = newRow.insertCell(3);
  newCell4.innerHTML = 'four';
  
  var newCell5 = newRow.insertCell(4);
  newCell5.innerHTML = 'five';
  
  var newCell6 = newRow.insertCell(5);
  newCell6.innerHTML = 'six';
  
  var newCell7 = newRow.insertCell(6);
  newCell7.innerHTML = 'seven';
  </code></pre>
  
  <p>I have since added the jQuery library as I wanted some functionality that I haven't forseen (otherwise I would've done the Add Row stuff in query).</p>
  
  <pre><code>newRow.id = "row_" + (pos + 1);
  newRow.className = "hide";
  
  $(document).ready(function() {
      $("#row_" + (pos + 1)).switchClass("hide", "show-row");
  });
  </code></pre>
  
  <p>The adding of the row works, but it doesn't animate. There is a delay in it appearing (which I guess would be the time it takes to animate).</p>
  
  <p>Does anyone know why the animation isn't working?</p>
  
  <p>Thanks.</p>