When the page loads, I have hidden a div using

#hidDiv{
  visibility: hidden;
}

I use jQuery to make it visible.

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

My question is how do I make it fade in gently instead of appearing quickly?

Note: It's important that visibility: hidden; should be maintained. E.g. can not use hide(); instead of visibility: hidden;

When the page loads, I have hidden a div using

#hidDiv{
  visibility: hidden;
}

I use jQuery to make it visible.

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

My question is how do I make it fade in gently instead of appearing quickly?

Note: It's important that visibility: hidden; should be maintained. E.g. can not use hide(); instead of visibility: hidden;

• javascript
• jquery
• html
• css

• possible duplicate of Fading visibility of element using jQuery – Stickers Commented May 28, 2015 at 4:08
• @sdcr: thanks I did not e across that while googling. Perhaps coz I wasn't aware of how to do the animate – Becky Commented May 28, 2015 at 4:11

3 Answers 3

If you don't want to use 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 is the number of seconds to fade for. Make sure you change all of them.

You can then just change the class with javascript:

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

More Reading:

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

Use jQuery fadeIn()

 $('div').fadeIn();

Otherwise, if visibility must be maintained, do

$('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./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>

See Want to use jquery fade in effects, but want to use visibility:hidden initially

As AmmarCSE has stated, if you are using jQuery you can use $("div").fadeIn(); for more control you can also set a timeframe using fadeIn's first argument. ie

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

This first argument can be one of the built in time values of "fast" or "slow" etc or it can be a time in milliseconds ie

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

The function also has a callback in case you want to do something once the element has finished fading in. It can be used like so...

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

You can also use fadeOut() in the same manner to fade the div back out... $("div").fadeOut("slow");

The docs on fadeIn() can be found here -> http://api.jquery./fadein/

Another option would be to use jQuery's animate() function on the elements opacity. Ie.

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

This is useful if you also want to animate other properties of the element at the same time. ie.

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

The docs for animate() can be found here -> http://api.jquery./animate/

Another option would to use css transitions like so...

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

And then use jquery to add or remove the fadeIn class to trigger the fading ie.

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

This will fade the div in or out on click of the body.

More info on transitions here -> http://www.w3schools./css/css3_transitions.asp

You could also use css animations but I wont go into that here. Hope the extra info helps someone.