Create a gist now

Instantly share code, notes, and snippets.

@chrisbuttery /1.js
Last active Jun 15, 2017

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 commented Jun 3, 2016 edited

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

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

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