jquery - show a fadeIn effect in this javascript function? -

i have function show loading image when page loading:

<script> function onready(callback) {     var intervalid = window.setinterval(checkready, 1000);      function checkready() {         if (document.getelementsbytagname('body')[0] !== undefined) {             window.clearinterval(intervalid);             callback.call(this);         }     } }  function show(id, value) {     document.getelementbyid(id).style.display = value ? 'block' : 'none'; }  onready(function () {     show('all', true);     show('loading', false); }); </script> 

jsfiddle

what want add fadein effect show div #all when loading complete.

can add fadein effect in function show? can use jquery? ideas?

you can use following function fade in & fade out effect using javascript. credit

    function fadein(el, display) {     el.style.opacity = 0;     el.style.display = display || "block";      (function fade() {         var val = parsefloat(el.style.opacity);         if (!((val += .01) > 1)) {             el.style.opacity = val;             requestanimationframe(fade);         }     })(); }  function fadeout(el) {     el.style.opacity = 1;      (function fade() {         if ((el.style.opacity -= .01) < 0) {             el.style.display = "none";         } else {             requestanimationframe(fade);         }     })(); } 

and change show function following.

function show(id, value) {     var el = document.getelementbyid(id);     if(value)         fadein(el)     else          fadeout(el); } 

updated fiddle