Fade an Element In or Out with a Toggle
Fade an HTML element in our out using a button or href link.
var on = true;
function toggle() {
if (on) { fadeOut(); } else { fadeIn(); }
on = !on;
}
function fadeOut(){
document.getElementById("fader").style.transition = "opacity 0.5s linear 0s";
document.getElementById("fader").style.opacity = 0;
document.getElementById("toggleBtn").innerHTML = "Fade In";
}
function fadeIn(){
document.getElementById("fader").style.transition = "opacity 0.5s linear 0s";
document.getElementById("fader").style.opacity = 1;
document.getElementById("toggleBtn").innerHTML = "Fade Out";
}
Example:
Javascript
Insert the Javascript above into the document head, or just above the </body> tag.
HTML:
Create a div or span element with id "fader" with content that should be faded in and out.
<p><button id="toggleBtn" onclick="toggle();">Fade out</button></p>
<div id="fader">
<p>This is the content of the box to fade in or out.</p>
<p>If the style position is set to absolute the box will fade in/out over top of page content.</p>
</div>
Produces the result:
This is the content of the box to fade in or out.
If the style position is set to absolute the box will fade in/out over top of page content.