3

私のAjaxフォームが送信された後、このコードを使用してテーブルに新しい行を動的に追加しています

var $var = $('table');
var newRow = "<tr><td> blah </td></tr>"

$var.find('tr:last-child').before(newRow)

今、私はその行の背景色を3秒間だけ明るい黄色にしてから、通常に戻したい

4

4 に答える 4

2

関数を使用して試すことができsetTimeoutます：

var $newRow = $("<tr class='light'><td>blah<td></tr>");
$var.find('tr:last-child').before($newRow);
setTimeout(function(){
    $('#table tr.light').removeClass('light')
}, 3000)
于 2012-10-10T02:12:24.077 に答える
1

jsBin デモ

良いアイデアは（BGカラーをアニメーション化するためのjQuery UIなしで）することです：

  • tdCSS のデフォルトですべての要素にカスタム カラーを設定する
  • trCSS のデフォルトですべての要素に黄色を設定する
  • jQuery -非表示の要素で newtrを挿入 td
  • 要素にフェードインtd！

CSS

table tr{
  display:block;
  background:yellow;
}
table td{
  display:block;
  background:#eee;
}

jQuery

var $var = $('table');

$('button').click(function(){

   var newRow = $("<tr><td> NEW ROW! </td></tr>");
   $var.find('tr:last-child').before(newRow);
   newRow.find('td').hide().fadeTo(3000,1);
  
});
于 2012-10-10T02:27:26.257 に答える
0

newスタイルを持つクラスを追加し、と を使用delayしqueueて 3 秒間待機し、 で削除newしremoveClassます。

JS

var $newRow = "<tr class='new'><td> blah<td></tr>";
$var.find('tr:last-child').before($newRow)
    .delay(3000).queue(function(){
        $('.new').removeClass('new');
    });

CSS

.new {
    background-color: yellow;
}

デモ

于 2012-10-10T02:12:07.837 に答える
0

あなたがjQueryUIを使用していると言うように、組み込みの「ハイライト」効果を使用できます。ここでデモを見ることができますhttp://jqueryui.com/effect/

于 2012-10-10T02:54:05.350 に答える