How do smooth slides work in javascript?

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 开发者_Python百科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.

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);
  }
}

I have never looked at the jQuery code myself, but i'm pretty sure it uses a loop/timeout to increment the top/left/bottom/right css position of the element gradually using the specified easing equation.

You might want to have a look at jQuery source code for the animate() function.

CSS3 makes it trivial.

For non-CSS3 based solution, this is the first Google result for the query "javascript smooth animation": http://www.schillmania.com/content/projects/javascript-animation-2/

I am adding some code from one of my projects to move the div right

belolw xs_tuck() will be called till finalleftpositionval reaches

This code makes the div move to right.

if(xs_endpt<finalLeftPositionVal){
     xs_endpt+=5;
     xs_pDiv2.style.left=xs_endpt;
     setTimeout("xs_tuck();",20); 
    }