how to give fadeout effect to a page in javascript without using jQuery

Question

.. i tried using the code in which the loading will keep on increasing till 100 until a new page will open..

if(loading==90){
  preload.style.animation = "fadeOut 2s ease";
}

but its not working

you want a `transition` - `animation` is far more complicated than you think - and transitions (and animations) don't understand "fadeOut", just because it's what you want it to do - read [some documentation about transition](https://developer.mozilla.org/en/docs/Web/CSS/transition) — Jaromanda X, Mar 16 '17 at 10:14
You should do a css transition. There's a link: http://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect — Marcin Restel, Mar 16 '17 at 10:20
@Banzay if (window.addEventListener) { window.addEventListener('load', cool, false); } function cool() { var preload =document.getElementById("preload"); var loading = 0; var id = setInterval(frame,64); function frame(){ if(loading==100){ clearInterval(id); window.open("test1.html","_self"); } else{ loading = loading + 1; if(loading==90){ preload.style.opacity = 0.5; } } } }; — Nitin Bisht, Mar 16 '17 at 12:06

score 0 · Answer 1 · answered Mar 16 '17 at 10:17

0

Use css opacity, 1 is full visible, 0 is hidden and 0.5 is half visible.

document.getElementById("yourId").style.opacity = "0.5";

answered Mar 16 '17 at 10:17

Carnaru Valentin

1,690
17
27

score 0 · Answer 2 · answered Mar 16 '17 at 13:41

You can append class to preload element

if (window.addEventListener) {
 window.addEventListener('load', cool, false); 
}
function cool() {

 var preload = document.getElementById("preload");
 var loading = 0;
 var id = setInterval(frame,64);

 function frame() {

 if(loading == 100) {
  clearInterval(id);
//  window.open("test1.html","_self"); 
 }

 if(++loading == 90){ 
         preload.className = "ld"; 
 } 
 }
};

#preload {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  background: tomato;
  width: 100%;
  height: 200px;
  transition: all 2s ease;
}
.ld {
  opacity: 0;
}

<div id="preload"></div>
test string

how to give fadeout effect to a page in javascript without using jQuery

2 Answers2