Menu
I want to make an HTML div tag fade in and fade out.
I have some code that fades out, but when I fade in, the opacity of the div stays at 0.1 and doesn't increase.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Fade to Black</title> <script type="text/javascript"> //<![CDATA[ function slidePanel(elementToSlide, slideSource) { var element = document.getElementById(elementToSlide); if(element.up == null || element.up == false) { setTimeout("fadeOut(\"" + elementToSlide + "\")", 100); element.up = true; slideSource.innerHTML = "Bring it down"; } else { setTimeout("fadeIn(\"" + elementToSlide + "\")", 100); element.up = false; slideSource.innerHTML = "Take it up"; } } function fadeIn(elementToFade) { var element = document.getElementById(elementToFade); element.style.opacity += 0.1; if(element.style.opacity > 1.0) { element.style.opacity = 1.0; } else { setTimeout("fadeIn(\"" + elementToFade + "\")", 100); } } function fadeOut(elementToFade) { var element = document.getElementById(elementToFade); element.style.opacity -= 0.1; if(element.style.opacity < 0.0) { element.style.opacity = 0.0; } else { setTimeout("fadeOut(\"" + elementToFade + "\")", 100); } } //]]> </script> </head> <body> <div> <div id="slideSource" style="width:150px; height:20px; text-align:center; background:green" onclick="slidePanel('panel', this)"> Take It up </div> <div id="panel" style="width:150px; height:130px; text-align:center; background:red; opacity:1.0;"> Contents </div> </div> </body> </html> What am I doing wrong and what is the best way to fade in and fade out an element?
762
The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector). fadeOut(speed,callback);
Use animation and transition property to create a fade-in effect on page load using CSS. Method 1: Using CSS animation property: A CSS animation is defined with 2 keyframes. One with the opacity set to 0, the other with the opacity set to 1.
To make the image transition with a fading effect we use the asynchronous function. Inside the asynchronous function, use another setInterval() method to slowly decrease the opacity of the topmost image till opacity becomes 0. By doing this, the topmost image will appear to fade away slowly.
Here is a more efficient way of fading out an element:
function fade(element) { var op = 1; // initial opacity var timer = setInterval(function () { if (op <= 0.1){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } you can do the reverse for fade in
setInterval or setTimeout should not get a string as argument
google the evils of eval to know why
And here is a more efficient way of fading in an element.
function unfade(element) { var op = 0.1; // initial opacity element.style.display = 'block'; var timer = setInterval(function () { if (op >= 1){ clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, 10); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
