Is there a way for me to make my CSS animation functions more efficient? I have similar functions for different properties like height, width, and left. Can I modify the function below to accept a CSS property argument instead of hardcoding height?
WindowItem.prototype.animateHeight = function(inElement, inTarget) {
var selfCall = true;
var currHeight = parseInt(inElement.style.height, 10);
if (this.isExpanded) {
if (currHeight < inTarget) {
currHeight += ((inTarget-currHeight)>>3)+1;
if (currHeight >= inTarget) {
currHeight = inTarget;
selfCall = false;
}
}
}
else {
if (currHeight > inTarget) {
currHeight -= ((currHeight-inTarget)>>3)+1;
if (currHeight <= inTarget) {
currHeight = inTarget;
selfCall = false;
}
}
}
inElement.style.height = currHeight+"px";
if (selfCall) {
var self = this;
setTimeout(function() {
self.animateHeight(inElement, inTarget);
}, 33);
}
}
Edit: To specify the height when calling this function, use something like
this.animateHeight(this.imgWindow, 0);