テーブル行の追加をアニメーション化する（JavaScript + jQuery）

Question

以下に示す表の行を追加するためのコードを記述しました。

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'; 

私は私が予見されていないいくつかの機能を望んでいたとして、jQueryライブラリを追加しましたので、（そうでなければ、私は、クエリ内の行の追加のものをやっただろう）があります。

newRow.id = "row_" + (pos + 1); 
newRow.className = "hide"; 

$(document).ready(function() { 
    $("#row_" + (pos + 1)).switchClass("hide", "show-row"); 
}); 

行の追加は機能しますが、アニメーション化されません。表示されるのに遅延があります（アニメーション化するのにかかる時間になると思います）。

アニメーションが動作しない理由を知っている人はいますか？

ありがとうございました。

Answer 1

これを試してみてください。この

$(document).ready(function() { 
    $("#row_" + (pos + 1)).removeClass("hide").addClass("show-row").hide().show('slow'); 
}); 

Answer 2

をお試しください：

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'; 

    newRow.id = "row_" + (pos + 1); 
    newRow.className = "hide"; 

    $("#row_" + (pos + 1)).switchClass("hide", "show-row"); 
} 

$（ドキュメント）.ready（関数（）あなたはできるだけ早くコード実行を必要とするとき、{...}を使用する必要がありますDOMは操作可能ですが、基本的にready関数に渡された関数は、ページのロード時に実行されます。readyイベントが既に発生した後、元のjQueryコードは実行されません。http://api.jquery.com/ready/