Astrify Astrify - 3 months ago 13
HTML Question

HTML <body> fadeIn/fadeOut with jQuery only works with display:none

I have quite a few page effects on the load, and they can cause the page to disfigure on load. To stop this, I'm fading the body in and out. However, it only works when

display:none;
is attributed to the body section of the CSS.

CSS

body {
position: relative;
min-height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-collapse: collapse;
font-size: 12px;
display: none;
}


JS

window.onload = function () {
$('body').fadeIn();
main(); // my effect function
};

window.onbeforeunload = function () {
$('body').fadeOut();
};


I'm using a the design editor in VS 2015 and I can't see my pages because
display:none;
is set.

Is there any reason it's not working without
display:none;
?

Answer

fadeIn animates the opacity from its current state to 1 (i.e. no transparency).

If the element is completely hidden, that will be a transition from 0 to 1. If the element has a 50% opacity, it will be a transition from 0.5 to 1.

If, on the other hand, the element is already visible, there will be no animation at all, as the element is already at the target state.