通過淡入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動畫，但我不會在這里進行。 希望額外的信息可以幫助某人。