Skip to content

Instantly share code, notes, and snippets.

@hctilg
Created July 29, 2024 14:48
Show Gist options
  • Save hctilg/1d14a210bbe99af6419ae21134c574c9 to your computer and use it in GitHub Desktop.
Save hctilg/1d14a210bbe99af6419ae21134c574c9 to your computer and use it in GitHub Desktop.
Animation fadeOut and fadeIn using JavaScript
var fadeInInterval, fadeOutInterval;
const fadeOut = (element, timing=7) => {
clearInterval(fadeInInterval);
clearInterval(fadeOutInterval);
element.fadeOut = timing => {
var newValue = 1;
element.style.opacity = 1;
fadeOutInterval = setInterval(() => {
if (newValue > 0) {
newValue -= 0.01;
} else if (newValue < 0) {
element.style.opacity = 0;
element.style.display = 'none';
clearInterval(fadeOutInterval);
}
element.style.opacity = newValue;
}, timing);
}
element.fadeOut(timing);
}
const fadeIn = (element, timing=7) => {
clearInterval(fadeInInterval);
clearInterval(fadeOutInterval);
element.fadeIn = timing => {
var newValue = 0;
element.style.display = 'block';
element.style.opacity = 0;
fadeInInterval = setInterval(() => {
if (newValue < 1) {
newValue += 0.01;
} else if (newValue === 1) {
clearInterval(fadeInInterval);
}
element.style.opacity = newValue;
}, timing);
}
element.fadeIn(timing);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment