2

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;

Becky
  • 5,467
  • 9
  • 40
  • 73
  • possible duplicate of [Fading visibility of element using jQuery](http://stackoverflow.com/questions/1031927/fading-visibility-of-element-using-jquery) – Stickers May 28 '15 at 04:08
  • @sdcr: thanks I did not come across that while googling. Perhaps coz I wasn't aware of how to do the `animate` – Becky May 28 '15 at 04:11

3 Answers3

7

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:

3ocene
  • 2,102
  • 1
  • 15
  • 30
  • Should be: `document.getElementById("theElement").className = "show"; document.getElementById("theElement").className = "hide";` since `theElement` is an id – toing_toing Aug 23 '18 at 09:05
  • Good catch—I must have been writing fast. Thanks @toing_toing – 3ocene Aug 23 '18 at 18:38
6

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.com/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

Community
  • 1
  • 1
AmmarCSE
  • 30,079
  • 5
  • 45
  • 53
1

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.com/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.com/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.com/css/css3_transitions.asp

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

Ed Fryed
  • 2,160
  • 16
  • 14