Create a gist now

Instantly share code, notes, and snippets.

@chrisbuttery /1.js
Last active Jun 29, 2018

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.

Show comment
Hide comment

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