フェード

Question

私はテーブルの最後に新しい行を追加するために、次のコードがあります。

$('.row-data:last').after('some HTML rows'); 

が、私はそう各行がフェードイン.fadeIn("slow")ようなものを使用したいがそれが表示されますが、私は任意のアニメーションを取得していないようです前：

$('.row-data:last').after('some HTML rows').fadeIn("slow"); 

任意のアイデア私が欠けている何か？

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

Answer 1

これを試してみてください：

var rows = $('some HTML rows'); 
rows.hide(); 
$('.row-data:last-child').after(rows); 
rows.fadeIn("slow"); 

例：http://jsfiddle.net/qdPAe/1/

Answer 2

あなたは、テーブルの行にアニメーションを適用することはできません。 TDのアニメーション化。シームレスになります。

// JS

function fadeRow(rowSelector, callback) 
{ 
    var childCellsSelector = $(rowSelector).children("td"); 
    var ubound = childCellsSelector.length - 1; 
    var lastCallback = null; 

    childCellsSelector.each(function(i) 
    { 
     // Only execute the callback on the last element. 
     if (ubound == i) 
      lastCallback = callback 

     $(this).fadeIn("slow", lastCallback) 

    }); 
} 

次に好きそれを呼び出す：

fadeRow($('selectorOfTR')); 

オプションで、行を削除する/隠すためにこれを変更することができます。このスクリプトのコールバック部分でremove（）コールを提供するだけです。

Answer 3

私のテーブルの行は、他のブラウザではうんざりですが、私のテーブルの行はぼやけています。あなたの問題は、最初に追加している行を隠しておかないといけません。それから後で見たい要素が消えることはありません（行やセルになります）。私は次のようにうまく働いています：

var row = jQuery('<tr><td>test</td><td>row</td></tr>'); 

row.hide(); 

jQuery('.row-data:last').after(row); 

row.fadeIn(500); 

これは役に立ちます。 jQueryのV1.7ところで...

Answer 4

はフェードバックグラウンドを持つテーブルの上に行を追加します。

$('button').click(function() { 
    $('<tr class="anim highlight"><td>new text</td></tr>') 
    .hide() 
    .prependTo('table tbody') 
    .fadeIn("slow") 
    .addClass('normal'); 
}); 

は、バックグラウンドトランジションアニメーションを追加します。

.anim { 
    transition: background 5s linear; 
} 
.highlight{ 
    background: #FF3333; 
} 
.normal { 
    background: transparent; 
} 

は、私が「http://jsfiddle.net/qdPAe/699/