Create a gist now

Instantly share code, notes, and snippets.

@chrisbuttery /1.js
Last active Apr 28, 2018

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.

Show comment Hide comment
@bnoden

bnoden 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

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.

Show comment Hide comment
@Fallenstedt

Fallenstedt Nov 9, 2016

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

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

@indraone01

This comment has been minimized.

Show comment Hide comment
@indraone01

indraone01 Nov 10, 2016

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

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