通过淡入div使div可见

Question

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

#hidDiv{
  visibility: hidden;
}

我使用jQuery使其可见.

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

我的问题是如何让它轻轻褪色而不是快速出现？

注意:visibility: hidden;应该保持这一点很重要.例如,不能使用hide();而不是visibility: hidden;

Answer 1

使用jQuery fadeIn()

 $('div').fadeIn();

否则,如果visibility必须保持,做

$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');

$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');

div{
  width:100px;
  height:100px;
  background:green;
 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>

请参阅想要使用jquery淡入淡出效果,但希望最初使用visibility:hidden

Answer 2

如果你不想使用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

更多阅读:

• 来自W3Schools的简单文档
• 来自MDN的更全面的文档
• 来自caniuse.com的兼容性信息