Astrify Astrify - 10 months ago 41
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

is attributed to the body section of the 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;


window.onload = function () {
main(); // my effect function

window.onbeforeunload = function () {

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

Is there any reason it's not working without


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.