Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@chrisbuttery
Last active April 6, 2024 16:10
Show Gist options
  • Star 41 You must be signed in to star a gist
  • Fork 15 You must be signed in to fork a gist
  • Save chrisbuttery/cf34533cbb30c95ff155 to your computer and use it in GitHub Desktop.
Save chrisbuttery/cf34533cbb30c95ff155 to your computer and use it in GitHub Desktop.
Fade in / Fade out
// fade out
function fade(el) {
var op = 1;
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
el.style.display = 'none';
}
el.style.opacity = op;
op -= op * 0.1;
}, 50);
}
// fade in
function fadeIn(el) {
var op = 0;
el.style.opacity = op;
el.style.display = 'inline-block';
var timer = setInterval(function () {
if (op >= 1.0){
clearInterval(timer);
}
el.style.opacity = op;
op = op + 0.1;
}, 50);
}
// fade out
function fadeOut(el){
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
setTimeout(fade, 40);
}
})();
}
// fade in
function fadeIn(el){
el.style.opacity = 0;
el.style.display = "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
setTimeout(fade, 40);
}
})();
}
// fade out
function fadeOut(el){
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
// fade in
function fadeIn(el){
el.style.opacity = 0;
el.style.display = "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
// fade out
function fadeOut(el){
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
// fade in
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);
}
})();
}
// fade in
function fadeIn(el, display){
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
var proceed = ((val += 0.1) > 1) ? false : true;
if (proceed) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
var el = document.getElementById("lga");
fadeOut(el);
fadeIn(el);
fadeIn(el, "inline-block");
@bnoden
Copy link

bnoden commented Jun 3, 2016

Thanks a lot! I wasn't sure if I could do this without jQuery.
http://codepen.io/bnoden/full/qNdXBZ/
https://github.com/bnoden/splash/blob/master/js/js-splash.js

@Fallenstedt
Copy link

I found that by requesting animation frames prevents the element from "flashing" before fading in. Great work.

@indraone01
Copy link

Nice code. Finally i can more animated without jQuery help. Not bad idea to keep the pure js code.

@MoralistFestus
Copy link

Nice Gist, But a good usage will do for those codes. Provide a usage for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment