2

我想创建一个页面，其中一个表格在加载时会淡入（从透明到不透明）。我试过使用：

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

它有点工作，但表格出现，迅速消失，然后顺利淡入。有没有办法在不预先出现表格的情况下实现淡入？

4

6 回答 6

5

怎么了：

  • 该表是“显示：表；” 默认情况下。
  • 浏览器读取 DOM 并显示表格
  • jQuery隐藏表格并做动画

在 CSSdisplay:none;中为您的表格设置：

#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);
})

直到整个页面并且它的依赖项已经加载（ $(document).ready 函数），jQuery才会被触发，但是表格一旦加载就会显示在页面上，这将始终在 jQuery 触发之前。一旦 jQuery 触发，它会隐藏表格，然后将其淡入。您只需要使用 CSS 将其隐藏，然后将其淡入。简单:)

于 2012-07-17T08:39:39.910 回答
1

这是使用 jQuery 在您的表中淡入淡出的完整解决方案。

1) 首先在 header 标签中包含最新的 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）脚本标签中的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

该表首先显示，因为 Javascript 是在 DOM 加载后执行的。您最初应该在 CSS 中使用 display:none 来隐藏表格。

于 2012-07-17T08:41:01.800 回答