javascript - 通过淡入使 div 可见

Question

当页面加载时，我使用隐藏了一个 div

#hidDiv{
  visibility: hidden;
}

我使用 jQuery 使其可见。

$('#hidDiv').css('visibility', 'visible');

我的问题是如何让它逐渐淡入而不是快速出现？

注意:重要的是 visibility: hidden; 应该保持。例如。不能使用 hide(); 而不是 visibility: hidden;

Answer 1

如果你不想使用JQuery，

html:

<div id="theElement" class="hide"></div>

CSS:

.hide {
  opacity: 0;
  transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}
.show {
  opacity: 1;
  transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}

*1s 是淡入淡出的秒数。确保更改所有这些。

然后您可以使用 javascript 更改类:

document.getElementById('theElement').className = 'show'; // Fade in
document.getElementById('theElement').className = 'hide'; // Fade out

更多阅读:

• Simple documentation from W3Schools
• More thorough documentation from MDN
• Compatibility info from caniuse.com