JS Animation - Fade/Appear DIV Elements Tutorial [Pt. 1]

I was thinking of doing a series of tutorials on the different effects that you can code and apply on DIV elements, without the use of any library. Today we'll start of with a very basic effect of toggling the visibility of the DIV - fade and Appear.

If you have any problem during the tutorial I suggest you drop by our forum, I also suggest you download the necessary files so that you can understand everything better while it is happening.

To do any of the above animations, we'll have to change the opacity of the DIV element. We write the following function to change the opacity successfully in all browsers -

function setOpacity(domId, val) {
obj = document.getElementById(domId);
obj.style.MozOpacity = val;
obj.style.opacity = val/10;
obj.style.filter = 'alpha(opacity=' + val*10 + ')';

};

So we first ask for the domId of the element, then get that element by Id and change its style to get the desired opacity. Remember the val can range only between 0-10. Now for the actual animation.

Fade
To fade the object we first check whether or not that element is already hidden (if it is we return false). We make a variable alpha with value of 10, and a also a function f(), inside the function fade(domID). We call this function f(), from inside itself after every 100 milliseconds till alpha becomes 0, and once the alpha is 0, and we can't see it, we hide the element.

function fade(domId){
obj = document.getElementById(domId); //Get the Element

 if(obj.style.display == "none") return false; //Return false if the element is already hidden

 var alpha = 10; //Set the initial value of alpha to 10 (Opaque)
 function f(){ //Internal function

  alpha--; //Decrement the alpha value
  setOpacity(domId, alpha); //Set the opacity of our element to the specified alpha

  if(alpha > -1){ //If alpha is still bigger than -1 then..
   setTimeout(f, 100); //..then call the function again after 100 milliseconds

  }else{ //otherwise..
   obj.style.display = 'none'; //..otherwise now that we cant see the element anyways, hide it

  }
}
setTimeout(f, 100); //This is where we call the f() function for the first time

};

Thats pretty much it. Now to fade any div all you need to do it fade('divId'); and you'll get beautiful animation on your page.


Appear
To fade the object we first check whether or not that element is already being displayed (if it is we return false). Then we un-hide the element and then start the animation. We make a variable alpha with value of 0, and a also a function a(), inside the function appear(domID). We call this function a(), from inside itself after every 100 milliseconds till alpha becomes 10.

function appear(domId){
obj = document.getElementById(domId); //Get the element

 if(obj.style.display != "none") return false; //Return if it is already being displayed

 obj.style.display = ''; //Un-hide the object before its animation
 var alpha = 0; //Set the initial value of alpha to 0 (invisible)

 function a(){ //Internal function
  alpha++; //Increment alpha

  setOpacity(domId, alpha); //Set the opacity of our element to the specified alpha
  if(alpha < 11)setTimeout(a, 100);

/*Till alpha is 10, keep calling the
a() function after 100 milliseconds */
}
setTimeout(a, 100); //This is where we call the a() function for the first time

};

Done! Now you have your fade and appear functions ready to add animation on your page. You can download the files from the Bit Pixels' Forums. You can also drop by the forum if you have any queries, suggestions or just to say Hi!