Question

当页面加载时，我使用

隐藏了一个div

#hidDiv{
  visibility: hidden;
}

我使用jQuery使其可见。

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

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

注意：保持visibility: hidden;非常重要。例如。无法使用hide();代替visibility: hidden;

Answer 1

使用jQuery Angular-strap v2.2.1 not compatible with angular v1.3.15

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>

tbl.AsEnumerable()

请参阅fadeIn()

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

更多阅读：

Answer 3

正如AmmarCSE所述，如果您使用的是jQuery，可以使用$("div").fadeIn();进行更多控制，您也可以使用fadeIn的第一个参数设置时间范围。即

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

第一个参数可以是＆＃34; fast＆＃34;的内置时间值之一。或者＆＃34;慢＆＃34;等等，或者它可以是毫秒的时间，即

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

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

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

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

fadeIn（）上的文档可以在这里找到 - ＆gt; http://api.jquery.com/fadein/

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

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

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

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

animate（）的文档可以在这里找到 - ＆gt; 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。

此处有关转换的更多信息 - ＆gt; http://www.w3schools.com/css/css3_transitions.asp

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

通过淡入div使div可见

3 个答案:

更多阅读：