I wrote a JavaScript function that can make an element fade in or fade out providing it has an id, and I would like to keep it here to serve as notes for future developers to use.
This simple JavaScript code can make an image, a text, an object, or a box or whatever html element on the web page that has an id fade in or fade out. Now, I know it can also be done via CSS if you know how to make use of the transition animation effects, but this one could simplify that task as long as you know some JavaScript basics.
Here is a sample:
Fade In/Fade Out Demo
Documentation
In this JavaScript code, there are four functions namely fadeIn, fadeOut, fadeInEntrance, and fadeOutEntrance. Each of these functions are designed to target an element ID (DOM ID) and requires an additional parameter to control the fadeIn/fadeOut speed. The speed control varies to your browser’s FPS (Frames per second) rate. Depending on your FPS, let’s say you have a speed control value set to 15, it could give you a normal speed on your favorite browser, but it could be slightly faster on another.
The 4 functions work differently. Here’s a breakdown on each function:
fadeIn – Makes an object fade in.
fadeOut – Makes an object fade out.
fadeInEntrance – Similar to fadeIn but this is applied on window/page load.
fadeOutEntrance – Similar to fadeOut but this is applied on window/page load.
Do not use fadeIn or fadeOut on page load as it can cause undesirable animation effects. Use fadeInEntrance or fadeOutEntrance instead.
How to use the code
You have several ways to apply the code on your web page, the first one is to create a js file and fill it with my fade In/fade Out code then save it. Once you have the file, you can attach the javascript in the head of your html code. See example:
<head>
<script type="text/javascript" src="fadeinfadeout.js"></script>
</head>
Another way is to retrieve the javascript from Astralmeta’s Repository and attached it in your html head. This method requires an Internet connection.
<head>
<script type="text/javascript" src="https://astralmeta.com/repository/js/fadeinfadeout.js"></script>
</head>
To call or make use of a function, you should first give the element you wanted the effect to apply on an id. For example you are going to apply it on an image, therefore, you have to give your image an id, see below:
<img src="myimage.jpg" id="myid" />
“myid” in that example is the id.
The id is your identifier, this guides the javascript to determine its target element. Without it, javascript won’t be able to know where it’s going to work on.
Now, to call the function, you need to attach it to an event. You can learn more about events here. Let’s say, we wanted the animation to take effect on the image if we click a link. This is how to do it:
<img src="myimage.jpg" id="myid" /><br> <a href="#" onclick="fadeOut(myid,15);">Fade Out</a>
The above code will make your image fade out once you click the fade out link.
To call our functions, always remember to give it the target element’s id and the desired speed. For example:
fadeIn(myid,20);
fadeOut(myid,15);
Where the first parameter “myid” is the target element, and 20 and 15 as the speed.
To make use of the fadeInEntrance and fadeOutEntrance, you have to do it the same way as fadeIn and fadeOut, the only difference perhaps is that you have to call this function after the target element, not before. If you call it before, then it will not work as it will apply even before our target element loads, making the function unable to determine its target since the target hasn’t load and was missing when the function was called.
Here is an example, let’s say we wanted the target image to fadeIn on page load. Here’s how to do it:
<img src="myimage.jpg" id="myid" /> <script> fadeInEntrance(myid,15); </script>
The JavaScript Code
The JavaScript code works by manipulating the target element’s opacity, here is how we’ve done it…
function fadeIn(id,spd){
if(id.style.opacity == ""){
id.style.opacity = 1;
id.style.filter = "alpha(opacity=" + 100 + ")";
}
if(id.style.opacity < 1){
var opac = 0; // initial opacity
var cycle = setInterval(increaseOpacity,spd);
function increaseOpacity() {
opac += 0.01;
if(opac >= 1){
id.style.opacity = 1;
opac = 1;
clearInterval(cycle);
}
id.style.opacity = opac;
id.style.filter = "alpha(opacity=" + (opac * 100) + ")"; // IE fallback
}
} else {
clearInterval(cycle);
}
}
The code above is for fadeIn() function. As covered in the documentation above, the function requires an id and the speed value parameters, so the function format is fadeIn(id,spd) where id there is equivalent to document.getElementById(id) and spd is for the setInterval’s speed.
Line 2 in that code is a condition that if our element doesn’t have an inline style opacity value then our element’s inline style opacity will default to 1, which means that it’s 100% visible. Also, it will set inline style filter to alpha(opacity=100). Alpha opacity btw is for IE 8 and old browsers, it is the same as opacity 1.
Line 6 is a condition that if the id.style.opacity is less than 1, then we run the opacity increase method. In our code there, we use setInterval function to keep on incrementing our opacity value at the rate of spd until our opacity reaches 1. Once it reaches opacity 1 or 100% visibility, we make setInterval stop by calling clearInterval function. The new opacity values will then be thrown inside our inline styles ie. opacity and filter. This will generate an inline style for our target element. For example, if our target element is image with id “myid”, it would look from this:
<img src="myimage.jpg" id="myid" />
To this:
<img src="myimage.jpg" id="myid" style="opacity: 1" />
Or: (in IE 8)
<img src="myimage.jpg" id="myid" style="filter:alpha(opacity=100)" />
As javascript increments opacity’s value, this will create a fading in effect since our opacity is moving from 0 to 1 (1% to 100% visibility). This will be seen in real time.
If opacity is already at 1, then nothing will be done anymore.
In fadeOut effects, that process is reversed.
Here is our complete javascript code:
function fadeIn(id,spd){
if(id.style.opacity == ""){
id.style.opacity = 1;
id.style.filter = "alpha(opacity=" + 100 + ")";
}
if(id.style.opacity < 1){
var opac = 0; // initial opacity
var cycle = setInterval(increaseOpacity,spd);
function increaseOpacity() {
opac += 0.01;
if(opac >= 1){
id.style.opacity = 1;
opac = 1;
clearInterval(cycle);
}
id.style.opacity = opac;
id.style.filter = "alpha(opacity=" + (opac * 100) + ")"; // IE fallback
}
} else {
clearInterval(cycle);
}
}
function fadeOut(id,spd){
if(id.style.opacity == ""){
id.style.opacity = 1;
id.style.filter = "alpha(opacity=" + 100 + ")";
}
if(id.style.opacity > 0){
var opac = 1;
var cycle = setInterval(decreaseOpacity,spd);
function decreaseOpacity() {
opac -= 0.01;
if(opac <= 0){
id.style.opacity = 0;
opac = 0;
clearInterval(cycle);
}
id.style.opacity = opac;
id.style.filter = "alpha(opacity=" + (opac * 100) + ")";
}
} else {
clearInterval(cycle);
}
}
function fadeInEntrance(id,spd){
var opac = 0;
id.style.filter = "alpha(opacity=" + 0 + ")";
if(id.style.opacity <= 1){
var cycle = setInterval(increaseOpacity,spd);
function increaseOpacity() {
opac += 0.01;
if(opac >= 1){
id.style.opacity = 1;
opac = 1;
clearInterval(cycle);
}
id.style.opacity = opac;
id.style.filter = "alpha(opacity=" + (opac * 100) + ")";
}
} else {
clearInterval(cycle);
}
}
function fadeOutEntrance(id,spd){
var opac = 1;
id.style.filter = "alpha(opacity=" + 100 + ")";
if(id.style.opacity >= 0){
var cycle = setInterval(decreaseOpacity,spd);
function decreaseOpacity() {
opac -= 0.01;
if(opac <= 0){
id.style.opacity = 0;
opac = 0;
clearInterval(cycle);
}
id.style.opacity = opac;
id.style.filter = "alpha(opacity=" + (opac * 100) + ")";
}
} else {
clearInterval(cycle);
}
}
Note that I haven’t really tested this code on IE 8, if it doesn’t work on older versions of IE, you have to create an additional condition that checks for alpha opacity (aside from opacity). Also note that alpha opacity is similar to opacity only that it’s value is 1/100 of opacity’s value. Let’s say opacity is 0.1, in alpha opacity, that would be 10.
Follow me at:
