JS Animation - Pulsate DIV Elements Tutorial [Pt. 2]

As promised here is the second part of the JS Animation series. If you missed out on the first one, it was JS Animation - Fade/Appear DIV Elements Tutorial [Pt. 1]. In this tutorial we'll Pulsate DIV element using JS and no other libraries.

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.

I hope you remember the setOpacity() function that we wrote last time. It remains the same. For those who've forgotten, here it is again -

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

Now for some pulsating. When a DIV elements pulsates, we basically make it fade and then appear very fast but never actually hide. It is an effect that is used to bring attention to that element.

What we'll be doing for our pulsation function is -

1. Ask for the domID of the div and the number of times it needs to pulsate.
2. Get the DOM Element and check if it is visible or not.
3. If the number of pulses isn't given, then set it to a default 4.
4. Set the variable alpa to 10, and ch to -1.
5. ch, will be the variable that'll determine the rate of change of the opacity of the DIV.
6. We'll multiply times by 2
7. Now we'll make an internal function p(), this'll do the actual animation
8. Rest of it is explained in the code with comments

function pulsate(domId, times){
 obj = document.getElementById(domId); //Get the Element
 if(obj.style.display == "none") return false; //Return false if the element is hidden
 if(!times) times = 4; //If the user doesnt specify the no. of times he/she want pulsation
 //Add a default value of 4.
 var alpha = 10; //Set the initial value of alpha to 10 (Opaque)
 var ch = -1; //The rate of change of the opacity
 //Currently negative, as first it'll fade
 times *= 2; //Multiply the 'times' given my user by 2
 function p(){ //Internal function
  alpha += ch;
  /*Change the alpha according to the ch
  variable that could be positive or negative*/
  setOpacity(domId, alpha); //Set the opacity of our element to the specified alpha
  if((alpha < 0 || alpha > 10) && times > 0){
   /*If the alpha has gone out of range and times
   and it hasnt pulsated enought number of times...*/
   times--; //Decrement times
   if(ch<0){ //If ch is +ve make it -ve
    ch = 1;
   }else{//If ch is -ve make it +ve
    ch = -1;

   }
  }
  if(times > 0 ) setTimeout(p, 10);

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

I hope you get it. If you have any problem, drop by on the Google Group, and download the necessary files.