-
-
Save chrisbuttery/cf34533cbb30c95ff155 to your computer and use it in GitHub Desktop.
Fade in / Fade out
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
})(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
})(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
})(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
})(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var el = document.getElementById("lga"); | |
fadeOut(el); | |
fadeIn(el); | |
fadeIn(el, "inline-block"); |
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.
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
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