Question

For a while now i have been trying to figure out the algorithms behind smooth slides, fades etc..in javascript. Just to give you an example of what am talking about, I have seen a div with content in it that had a height of 0px and on toggled, it didn’t just snap to height, it smoothly and gradually grew to height using some sort of function. What i do know is that the height of this div was being assigned its height value from either a date object that had an interval set or a loop of some sort. I’ve searched all over the web trying to find tutorials explaining how this works but failed. Can someone please either explain to me how to create my own smooth fades, slides or reference some links that i can read?

PS: I know i can just use jquery, but i want to know how the fades and slides actually work.

Answer 1

It’s quite simple actually. All of these animations use a timer (see setInterval) with a short interval, say 100 milliseconds, and every time the timer fires, the property (height or whatever) is changed by a fraction of the total amount instead of all at once.

For example, if you want to slide from a height of 0px to 200px in 1 second, then you could set up a timer that fires every 100 ms and increases the height of the DIV by 20px. That way, in 1 second, the timer would have fired 10 times and the height would be 200px.

A simple example:

function slideOpen(elem, finalHeight, slideTime) {
  var count = slideTime * 10;      // 10 intervals per second
      height = 0,                  // current height
      delta = finalHeight / count; // change in height per interval

  var timerId = setInterval(slide, 100);

  function slide() {
    height += delta;
    elem.style.height = height + 'px';
    if (--count == 0)
      clearInterval(timerId);
  }
}