通过淡入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的兼容性信息

Answer 3

正如AmmarCSE所说，如果你使用的是jQuery，你可以使用$("div").fadeIn(); 为了获得更多控制，您还可以使用fadeIn的第一个参数设置时间范围。 即

$("div").fadeIn("slow"); 。

第一个参数可以是“快速”或“慢速”等内置时间值之一，也可以是以毫秒为单位的时间，即

$("div").fadeIn(1000);

该函数还有一个回调，以防你想在元素完成淡入后做某事。它可以像这样使用......

$("div").fadeIn("slow",function(){
  console.log("finished fading in");
});

你也可以用同样的方式使用fadeOut（）将div淡出... $("div").fadeOut("slow");

关于fadeIn（）的文档可以在这里找到 - > http://api.jquery.com/fadein/

另一种选择是在元素不透明度上使用jQuery的animate（）函数。 IE浏览器。

$("div").animate({
  opacity:0
},"slow");

如果您还想同时为元素的其他属性设置动画，这将非常有用。 即。

$("div").animate({
  opacity:0,
  left:200
},"slow");

animate（）的文档可以在这里找到 - > http://api.jquery.com/animate/

另一种选择是使用css转换，如此...

div {
    opacity:0;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity:1s;
}
div.fadeIn {
    opacity:1;
}

然后使用jquery添加或删除fadeIn类来触发衰落即。

$("body").on("click",function(){
  $("div").toggleClass("fadeIn");
});

这会在点击身体时淡入或淡出div。

有关转换的更多信息 - > http://www.w3schools.com/css/css3_transitions.asp

你也可以使用CSS动画，但我不会在这里进行。 希望额外的信息可以帮助某人。