1. ホーム
  2. jquery

[解決済み】テーブルの行でslideDown(またはshow)機能を使用するには?

2022-04-09 18:03:44

質問

テーブルに行を追加して、その行がスライドして表示されるようにしたいのですが、スライドダウン機能はテーブルの行に display:block スタイルを追加しているようで、レイアウトが乱れてしまいます。

この問題を回避する方法はありますか?

以下はそのコードです。

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

解決方法は?

テーブル行のアニメーションはサポートされていません。

ChafferとSwedbergによるquot;Learning jQuery"より。


<ブロッククオート

テーブルの行は特に ブラウザは、アニメーションの障害となる。 は異なる値(table-row と ブロック) の可視表示 プロパティがあります。 .hide()と.show() メソッドは、アニメーションを使用しない場合、常に テーブル行で使用するのが安全です。 このため jQueryバージョン1.1.3では、.fadeIn()および .fadeOut()も同様に使用可能です。


tdの内容をdivで囲み、その上でslideDownを使用することができます。アニメーションが余分なマークアップに値するかどうかを判断する必要があります。