2

テーブルが読み込まれると (透明から不透明に) フェードインするページを作成したいと考えています。私は使用してみました：

$(document).ready(function(){
    $('#table1').hide();
    $('#table1').fadeIn(1000);
  });

そして、それはうまくいきますが、テーブルが表示され、すぐに消えてからスムーズにフェードインします。テーブルを事前に表示せずにフェードインを実現する方法はありますか?

4

6 に答える 6

5

何が起こっている：

  • テーブルは「display:table;」です。デフォルトで。
  • ブラウザーは DOM を読み取り、テーブルを表示します
  • jQuery はテーブルを非表示にしてアニメーションを実行します

display:none;テーブルの CSS 内に設定します。

#table1{
   display:none;
}

jQuery:

$('#table1').fadeIn(1000);
于 2012-07-17T08:43:33.450 に答える
3

これを達成するには、

表示:なし

ただし、javascript を使用しないユーザーはテーブルを表示できないため、アクセシビリティの問題が発生します。

于 2012-07-17T08:40:49.490 に答える
1

うん。CSS でテーブルを display:none に設定し、最初の非表示を削除するだけです

CSS

#table1{display:none}

jQuery:

$(document).ready(function(){
    $('#table1').fadeIn(1000);
})

jQuery は、ページ全体とその依存関係が読み込まれるまで起動されません ($(document).ready 関数) が、読み込まれるとすぐにテーブルがページに表示されます。これは、常に jQuery が起動する前になります。jQuery が起動すると、テーブルが非表示になり、フェードインします。CSS で非表示にしてからフェードインするだけです。簡単です :)

于 2012-07-17T08:39:39.910 に答える
1

jQueryを使用してテーブルにフェードインするための完全なソリューションを次に示します。

1) 最初に、最新の jQuery.js および JQuery-UI Java スクリプト ファイルをヘッダー タグに含めます。

2) HTML:

<table id="table1" cellpadding="5" cellspacing="1" width="50%">
  <tr>
    <th>
      Column1
    </th>
    <th>
      Column2
    </th>
    <th>
      Column3
    </th>

  </tr>
  <tr>
    <td>
      data1 
    </td>
    <td>
      data2 
    </td>
    <td>
      data3 
    </td>
  </tr>
</table>

3) CSS:

#table1{
  border:1px solid #556688;
  background:#eee;
  display:none;
}
th{
  text-align:left;
}
td,th{
  border:1px solid #556688;
}

4) script タグ内の JQuery:

$(document).ready(function() {
    $('#table1').fadeIn(10000);
});

ビンで試してみてください: http://codebins.com/bin/4ldqpaj

于 2012-07-17T10:10:08.557 に答える
0

CSS で使用dispay:noneして、フェードインする前にテーブルを非表示にします。

于 2012-07-17T08:39:46.833 に答える
0

DOM が読み込まれた後に Javascript が実行されるため、最初にテーブルが表示されます。css で display:none を使用して、最初はテーブルを非表示にする必要があります。

于 2012-07-17T08:41:01.800 に答える