Pure JavaScript fade in function

by

Based on this site

EDIT-1
Added the functionality so that user can specify the animation duration(@Marzian comment)

You can try this:

function fadeIn(el, time) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / time;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

var el = document.getElementById("div1");
fadeIn(el, 3000); //first argument is the element and second the animation duration in ms

DEMO

More Related Contents:

  1. Fade In on Scroll Down, Fade Out on Scroll Up – based on element position in window
  2. CSS fade left to right
  3. fadeOut() and slideUp() at the same time?
  4. How do I check if an array includes a value in JavaScript?
  5. Why do you need to invoke an anonymous function on the same line?
  6. Full-screen iframe with a height of 100%
  7. Why does Prettier not format code in VS Code?
  8. How to delete document from firestore using where clause
  9. ReactJS call parent method
  10. Should Github be used as a CDN for javascript libraries? [closed]
  11. Watch multiple $scope attributes
  12. How to auto-reload files in Node.js?
  13. JavaScript – head, body or jQuery?
  14. clientHeight/clientWidth returning different values on different browsers
  15. How can I put [] (square brackets) in RegExp javascript?
  16. Arrow Function syntax not working with webpack?
  17. Webpack babel 6 ES6 decorators
  18. Simple (non-secure) hash function for JavaScript? [duplicate]
  19. Google SEO and hidden elements
  20. Is canvas getImageData method machine/browser dependent?
  21. What’s the difference between window.location and document.location?
  22. Understanding Event Queue and Call stack in javascript
  23. jQuery x y document coordinates of DOM object
  24. black and white text based on background image with css
  25. Lodash create collection from duplicate object keys
  26. Three.JS wireframe material – all polygons vs. just edges
  27. postMessage still broken on IE11?
  28. [[Prototype]] vs prototype: ..what is the difference? (MyCons.__proto__ === MyCons.prototype) equals FALSE
  29. Sending whole folder content to client with express
  30. How to get function body text in JavaScript? [duplicate]

Leave a Comment