demonstration of concept
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
}
#tst {
position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
function Test(id,ms){
this.obj=document.getElementById(id);
this.maxh=this.obj.getElementsByTagName('DIV')[0].offsetHeight;
this.top=this.obj.offsetTop;
this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,10);
this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,10);
this.ms=ms||1000;
}
Test.prototype.Toggle=function(){
this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,this.ms);
this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,this.ms);
}
/*]]>*/
</script>
</head>
<body onload="T=new Test('tst');">
<div class="p" onclick="T.Toggle();">
<div id="tst" >
<div >
Line 0 <br />
Line 1 <br />
Line 2 <br />
Line 3 <br />
Line 4 <br />
Line 5 <br />
Line 6 <br />
Line 7 <br />
Line 8 <br />
Line 9 <br />
</div>
</div>
Toggle
</div>
</body>
</html>