PDA

View Full Version : Animation Newbie! Please Help!


idledaylight
04-20-2006, 12:42 AM
Hi,

This is actually a JavaScript animation question, however I am using Robert Penner's equations and I think that my question relates to ActionScript as well. Here are my two functions:

// Grows element to natural height
function growElement(element) {
// Define variables
element.begin = parseInt(element.style.height);
element.finish = element.scrollHeight;
element.duration = 10;
element.change = element.finish - element.begin;
element.time = 0;

animateGrowth(element);
}

function animateGrowth(element) {
// Clear timeout if necessary
if (element.timeout) {
clearTimeout(element.timeout);
}
var position = easeInOut(element.time++,element.begin,element.cha nge,element.duration);

element.style.height = position + "px";
if (position < element.finish) {
// Recursion
var repeat = function() {
animateGrowth(element);
}
element.timeout = setTimeout(repeat,40);
}
}

And Robert Penner's Quadratic Ease In-Out function:
function easeInOut(t,b,c,d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
}

This works great, and makes my element grow exactly how I want it to. However, my question is this: how can I make the element shrink back to it's original height? In other words, this collection of functions successfully increases my elements height, but how can I adapt the functions to make it decrease it's height.

Any help is appreciated!