jQuery Как «плавно» добавить данные в таблицу

Question

Я работаю с добавлением датаров. Когда они добавлены, вся таблица выглядит как «рывки».

Есть ли способ плавно добавить дата? У меня есть следующее: ( У меня также есть скрипка здесь )

jQuery:

var $ trClone;

for (i = 1; i < 7; i++) {
    $trClone = $("#tblTest tr:last").clone();
    $trClone.attr('id', 'DataRow_' + i);
    $("#tblTest tr:last").after($trClone);
}

И таблица:

 <table id="tblTest" class="schedule-table" cellspacing="1" border="0" style="width:100%;"> 
    <tablebody>
        <tr>     
            <td class="resource-header"><span class="resource-header-text">Personnel</span></td>     
            <td class="resource-header"><span class="resource-header-text">Office</span></td>     
            <td class="dow"><span class="dow">Tue<br>01</span></td>
            <td class="dow"><span class="dow">Wed<br>02</span></td>
            <td class="dow"><span class="dow">Thu<br>03</span></td>
            <td class="dow"><span class="dow">Fri<br>04</span></td>
            <td class="weekend"><span class="weekend-text">Sat<br>05</span></td>
            <td class="weekend"><span class="weekend-text">Sun<br>06</span></td>
            <td class="dow"><span class="dow">Mon<br>07</span></td>
            <td class="dow"><span class="dow">Thu<br>31</span></td> 
        </tr> 

        <tr class="DataRow" id="DataRow_3"> 
            <td class="resource" style="display:none;"><span class="resource">3</span></td> 
            <td class="resource" id="TD_Name">
                <div style="float:left;">Lname, Fname</div>
                <div style="float:right;">
                    <img id="imgProgress1"  src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." />
                </div>        
            </td> 
            <td class="resource" id="TD_Office"><span>A6OK</span></td> 
            <td class="dow" id="TD_1" >Data1</td> 
            <td class="dow" id="TD_2" >Data2</td> 
            <td class="dow" id="TD_3" >Data3</td> 
            <td class="dow" id="TD_4" >Data4</td> 
            <td class="weekend" id="TD_5" >Data5</td> 
            <td class="weekend" id="TD_6" >Data6</td>  
        </tr>
    </tablebody>
</table>

Заранее спасибо за любую помощь.

Answer 1

Вы можете попробовать добавить его. Или slideDown

$trClone.css('display', 'none').
$("#tblTest tr:last").after($trClone);
$trClone.fadeIn('slow'); //or slideDown.