Skip to content

Instantly share code, notes, and snippets.

@tobiasroeder
Last active October 10, 2019 20:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tobiasroeder/54d5dfc02dbc7bb3a6fb1b42fafa93a2 to your computer and use it in GitHub Desktop.
Save tobiasroeder/54d5dfc02dbc7bb3a6fb1b42fafa93a2 to your computer and use it in GitHub Desktop.
Simple fade in/out function without any library. (pur JavaScript)
// source: https://chrisbuttery.com/articles/fade-in-fade-out-with-javascript/
// fadeOut (fade.js)
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val -= .1) < 0)) {
el.style.opacity = val;
requestAnimationFrame(fade);
} else {
el.style.display = "none";
}
})();
return true;
}
// fadeIn (fade.js)
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment