Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

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

This comment has been minimized.

Fallenstedt commented Nov 9, 2016

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

@indraone01

This comment has been minimized.

indraone01 commented Nov 10, 2016

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

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