FadeIn with javascript without jquery

Question

I have this code:

document.getElementById('showRtb').addEventListener('click', function () {
    document.getElementById('rtb').style.display="inline-table";    
});

document.getElementById('hideRtb').addEventListener('click', function () {
    document.getElementById('rtb').style.display="none";    
});

but now I want without jquery effect to make FadeIn animation, just with javascript. Without css3 and without jquery. Is that possible?

Given that jQuery is written in javascript, of course it is possible. I'd suggest you either look for the jQuery source code (where they define their method), or search for a tutorial that builds something similar. — Tyler
– Tyler, Commented Apr 2, 2016 at 16:19
I try to find something similar but everwhere is jquery based — Andrew
– Andrew, Commented Apr 2, 2016 at 16:26
Really? because searching "fadein without jquery" I found code in literally 1 minute. jsfiddle.net/2Pd6e/16 — Tyler
– Tyler, Commented Apr 2, 2016 at 16:28
@Andrew "Without css3 and without jquery." Why are jquery, css3 tags included at Question ? — guest271314
– guest271314, Commented Apr 2, 2016 at 17:12

guest271314 · Accepted Answer · 2016-04-02 17:03:39Z

You can use setInterval(), getComputedStyle(). See also TheAnimationinterface

var rtb = document.getElementById("rtb"),
  timer = null;

document.getElementById("showRtb").addEventListener("click", function() {
  if (rtb.style.opacity != 1) {
    clearTimeout(timer);
    rtb.style.display = "inline-table";
    timer = setInterval(function() {
      rtb.style.opacity = +rtb.style.opacity + .10;
      if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
        clearInterval(timer);
      }
    }, 100)
  }
});

document.getElementById("hideRtb").addEventListener("click", function() {
  if (rtb.style.opacity != 0) {
    clearTimeout(timer);
    timer = setInterval(function() {
      rtb.style.opacity = +rtb.style.opacity - .10;
      if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
        rtb.style.display = "none";
        clearInterval(timer);
      }
    }, 100)
  }
});

#rtb {
  width: 100px;
  height: 100px;
  background: olive;
  opacity: 0;
  display: none;
}

<button id="showRtb">show</button>
<button id="hideRtb">hide</button>
<br>
<div id="rtb"></div>

Collectives™ on Stack Overflow

FadeIn with javascript without jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related