Javascript Add fadeIn to the loading Div

Question

I have this code which loads an external local page into a div:

function load(url) {

    document.getElementById("myDiv").innerHTML='<object type="text/html" data="'+url+'"></object>';
    return false;


}

How can I make it fadeIn instead of just appearing? I would prefer if it was pure javascript

That was my first option but I'm trying to avoid needing to use third party libraries for this. So I'm looking for something in pure javascript — , May 26 '16 at 15:56

score 0 · Answer 1 · answered May 26 '16 at 15:54

0

The easiest way to do so is to add to your html jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

And then in your js file use .fadeIn() method on myDiv. Remember to link jQuery before you link the .js file

answered May 26 '16 at 15:54

Kweldulf

76
1
10

That was my first option but I'm trying to avoid needed to use third party libraries for this. So I'm looking for something in pure javascript – May 26 '16 at 15:56

score 0 · Answer 2 · answered May 26 '16 at 16:03

Or if you can't use jQuery create animate classes in css:

@keyframes fadeIn {
to {
   opacity: 1;
   }
}

.fade-in {
  opacity: 0;
 animation: fadeIn .5s ease-in 1 forwards;
}

.is-paused {
  animation-play-state: paused;
}

and then use this code in js:

var el = document.querySelector('.js-fade');
if (el.classList.contains('is-paused')){
el.classList.remove('is-paused');
}

The last thing you need to do is to add to myDiv classes of js-fade and fade-in is-paused. The aforementioned code is qute general so adapt it to your needs

score 0 · Accepted Answer · edited May 23 '17 at 11:44

I found a nice fadeIn function in this answer and applied it to your load function.

Fiddle

function load(url) {
  var myDiv = document.getElementById("myDiv");
  myDiv.innerHTML='<object type="text/html" data="'+url+'"></object>';
  fadeIn(myDiv);
  return false;
}

function fadeIn(el) {
  el.style.opacity = 0;
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.01;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };
  tick();
}

load('foo');

Javascript Add fadeIn to the loading Div

3 Answers3