3

ドキュメントでテーブルを使用していますが、ユーザーが新しいアイテムをリストに送信して、リストの一番上に「自動的に」表示されるようにしたいと考えています（はい、これはDIVの方が簡単ですが私が持っているもので作業しています）。

私はjQueryを使用しておりclone()、最新のテーブル行のコピーを作成し、fadeIn()更新してリストの一番上に追加した後、を使用して新しいアイテムを表示しています。内部的にjQueryは要素（DIVを想定）を「ブロック」に変換するため、cssクラスも「テーブル行」に変更します。正常に動作します。

コード全体はここにあります：

    var row = $("tbody tr:first").clone().hide(); // clone and then set display:none
    row.children("td[class=td-date]").html("today");
 // set some properties
    row.children("td[class=td-data]").html("data");
    row.children("td[class=td-type]").html("type");
// fadeIn new row at the top of the table.
    row.insertBefore("tbody tr:first").stop().fadeIn(2000).css("display","table-row");

問題は、プロセスの実行が速すぎる場合、つまり、fadeInが完了する前に、「clone（）」コマンドが不透明度のクローンを作成してしまうことです。

上記の最初の行を調整することで、Firefoxで実際に動作させることができます。

 var row = $("tbody tr:first").clone().css("opacity","1").hide();

今の私の懸念は、これらのいずれかが効率的に行われていること、および/または「不透明度」がクロスブラウザで安全に信頼できるかどうかわからないことです。

誰かが以前にこのようなことをしたことがあり、より信頼性の高いアプローチに関する指針を提供できますか？

4

3 に答える 3

2

jQuery css属性としての不透明度は、実装におけるブラウザーの違いを解消するため、安全なクロスブラウザーです。これがソースです

// IE uses filters for opacity
if ( !jQuery.support.opacity && name == "opacity" ) {
  if ( set ) {
    // IE has trouble with opacity if it does not have layout
    // Force it by setting the zoom level
    elem.zoom = 1;

    // Set the alpha filter to set the opacity
    elem.filter = (elem.filter || "").replace( /alpha\([^)]*\)/, "" ) +
    (parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
  }

  return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
  (parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '': "";
}

以下の作品。 作業デモ-URLに/editを追加して操作します。

  // stop previous animation on the previous inserted element
  var prevRow = $("tbody tr:first").stop(true,true);

  var row = prevRow.clone();
  row.children("td.td-date").text("today");
  row.children("td.td-data").text("data");
  row.children("td.td-type").text("type");

  row.fadeIn(2000).prependTo("tbody");
于 2009-09-07T22:31:42.420 に答える
1

クローンでhideを使用する理由はありません。クローンはまだDOMに追加されていないため、表示できません。

これを試して：

var row = $("tbody tr:first").clone(); // clone
// set some properties
row.children("td[class=td-date]").html("today");
row.children("td[class=td-data]").html("data");
row.children("td[class=td-type]").html("type");
// fadeIn new row at the top of the table.
row.insertBefore("tbody tr:first").fadeOut(0).fadeIn(2000).css("display","table-row");
于 2009-09-07T22:25:04.753 に答える
0

これを行うと、jQueryがそれを処理すると思います。

var row = $("tbody tr:first").clone().fadeIn(0).hide();
于 2009-08-21T23:50:24.063 に答える