jquery - jqueryでフェードインした後にテーブル行の背景色が点滅する

Question

まあ、これはあなたが得ることができるのと同じくらい基本的です！テーブルの最後に行を挿入し、すぐに非表示にしています。セルを追加したら、薄緑と白を交互に、背景に色を付けます。また、密集した列用に青と白を交互に使用しています。テキストはうまくフェードインしますが、終了すると、背景色が 1 ～ 2 秒間点滅します。明らかに、これは「アマチュアの夜に違いない」という「すごい」要因を殺します。

更新: 効果を示すデモ テーブルを作成しました。テーブルに border="1" を設定すると、行を追加すると、セル全体が青または緑になり、すべてがうまく見えます。境界線を 0 に設定すると、セルの周囲の領域が白くなり、元の色に戻ります。そのため、最後にレンダリングされるのは境界線のようです。

ただし、これは私が見ている効果とはまったく異なります。私のテーブルでは、セルの背景全体がこのように点滅します。テキストと一部の色が 1/2 秒間フェード インし、背景が 1/2 秒間白くなり、その後元の色に戻ります。

UPDATE2: セルをかなり大きくしたので、色が変わるテキストの後ろを除いて背景全体であることがわかります。境界線を「1」に変更すると、期待どおりに機能します。

<style type="text/css">
table#demo  {
  border-collapse: collapse;
  border-spacing:  0px;
  border-style:    none;
  font-size:       10px;
}

table#demo th {
  font-size:      10px;
  text-align:     center;
  vertical-align: bottom;
  border-style:   none;
    border-width:   0px;
}

table#demo td {
  font-size:       10px;
  text-align:      left;
  vertical-align:  top;
  text-decoration: none;
  font-weight:     none;
  padding:         0px 8px 0px 8px;
  border-style:    none;
  border-width:    0px;
}

.even_row2 {
  background-color: lightblue;
}
.odd_row2 {
  background-color: lightgreen;
}
</style>

<table id="demo_table" class="demo" border="1">
<thead>
<tr>
  <th width="75px">col 1</th>
  <th width="75px">col 2</th>
  <th width="75px">col 3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" onclick="addRow();" value="Add a row">

<script type="text/javascript">

var demoRowCnt=0;
function addRow() {

  ++demoRowCnt;

  var tbody = document.getElementById('demo_table').getElementsByTagName('tbody')[0];
  var rowObj = tbody.insertRow(tbody.rows.length);   
  $(rowObj).hide(); 

  var colNo = -1;
  var cell   = rowObj.insertCell(++colNo);
  cell.innerHTML = 'r' + demoRowCnt + ' c1';  

  cell   = rowObj.insertCell(++colNo);
  cell.innerHTML = 'r' + demoRowCnt + ' c2';  

  cell   = rowObj.insertCell(++colNo);
  cell.innerHTML = 'r' + demoRowCnt + ' c3';  


  // my colorRows function:
  var rowStyle = 'even_row2';

  for ( var r=0; r<tbody.rows.length; ++r ) {
    rowStyle = ( rowStyle == 'even_row2' ) ? 'odd_row2' : 'even_row2';
    var str = ( MSIE ) ? 'className' : 'class';
    tbody.rows[r].setAttribute('class', rowStyle);

  }

  $(rowObj).fadeIn("slow"); 

}
</script>