Here I have a function that fades a square box with id="box"
as soon as the page loads. I tried but failed to find out how to fade in the box again or simply how to fade in a box or an element with pure JavaScript not jQuery.
Here is my code for fadeOut()
function:
var box = document.getElementById('box');
function fadeOut(elem, speed)
{
if(!elem.style.opacity)
{
elem.style.opacity = 1;
}
setInterval(function(){
elem.style.opacity -= 0.02;
}, speed /50);
}
fadeOut(box, 2000);
#box
{
width: 100px;
height: 100px;
background-color: blue;
}
<div id="box"></div>
Many thanks in advance to contributors. cheers
The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: This method is often used together with the fadeIn() method.
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out. Syntax: $(selector).
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.
fadeOut() the place will be removed at once. . show(duration) and . hide(duration) animate the size of element (also the opacity) to 100% and 0% and the place of elements is also animated in that duration.
I'd suggest using CSS animation
@-webkit-keyframes fadeout {
0% {opacity:1;}
100% {opacity:0;}
}
@keyframes fadeout {
0% {opacity:1;}
100% {opacity:0;}
}
.fadeOut {
opacity:0;
-moz-animation : fadeout 1s linear;
-webkit-animation: fadeout 1s linear;
animation : fadeout 1s linear;
}
You only need to add fadeOut class to the element
If you want a pure JavaScript solution, you can use this:
http://jsfiddle.net/3weg2zj1/1/
<div id="box"></div>
#box {
width:100px;
height:100px;
background-color:blue;
}
var box = document.getElementById('box');
function fadeOutIn(elem, speed ) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
var inInterval = setInterval(function() {
elem.style.opacity = Number(elem.style.opacity)+0.02;
if (elem.style.opacity >= 1)
clearInterval(inInterval);
}, speed/50 );
} // end if
}, speed/50 );
} // end fadeOut()
fadeOutIn(box, 2000 );
setInterval()
call so that you can cancel it later. Note that, in the above code, this involves closuring, both on outInterval
and inInterval
.elem.style.opacity
: the +=
operator was refusing to work. After probably 10min of sitting and staring (and some experimentation), I finally figured out that elem.style.opacity
is always being forced to be a string (perhaps all CSS-linked properties behave this way...), and so the +
operator (and by extension the +=
operator) was doing string concatenation, which, under the naive LoC of elem.style.opacity += 0.02;
, was turning into elem.style.opacity = elem.style.opacity+0.02;
, which, if we assume elem.style.opacity
was at '0.02'
, was turning into elem.style.opacity = '0.02'+0.02;
, which was turning into elem.style.opacity = '0.020.02';
, which the browser JavaScript engine (ahem) generously parses as 0.020
(because it requires a valid numeric value for the CSS opacity property!), which resulted in the opacity getting stuck at 0.02
. Holy crap! That's why I had to add the cast-to-number before doing the addition.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