The sliding animation itself, like all animation in javascript, is done using timer functions: setTimeout
or setInterval
. For simple effects like this I always prefer setTimeout
since it's easier to end the animation sequence compared to setInterval
. How it works is to change CSS attribute values using setTimeout
:
// move the content div down 200 pixels:
var content = document.getElementById('content');
function moveDown () {
var top = parseInt(content.style.marginTop); // get the top margin
// we'll be using this to
// push the div down
if (!top) {
top = 0; // if the margin is undefined, default it to zero
}
top += 20; // add 20 pixels to the current margin
content.style.marginTop = top + 'px'; // push div down
if (top < 200) {
// If it's not yet 200 pixels then call this function
// again in another 100 milliseconds (100 ms gives us
// roughly 10 fps which should be good enough):
setTimeout(moveDown,100);
}
}
That's essentially the basics of animation in javascript. The idea is very simple. You can use any CSS style attribute for animation: top and left for absolutely or relatively positioned elements, margins like my example, width, height, transparency etc.
Now, as for what to use in your specific case depends on exactly what your intentions are. For example, the simplest thing to do what you describe would be to change the div height until it becomes zero. Something like:
function collapseContent () {
var height = parseInt(content.style.height);
if (!height) {
height = content.offsetHeight; // if height attribute is undefined then
// use the actual height of the div
}
height -= 10; // reduce height 10 pixels at a time
if (height < 0) height = 0;
content.style.height = height + 'px';
if (height > 0) {
// keep doing this until height is zero:
setTimeout(collapseContent,100);
}
}
But that's not how the example jQuery plugin does it. It looke like it moves the element by shifting its top and left style attribute and hides content off screen by using a container div with overflow:hidden
.