Fijate si esto te sirve como orientación:
Código PHP:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function $(id){
return document.getElementById(id);
}
function easingOut(obj,prop,inicio,fin,tiempo,rozamiento,unidad){
var i=setInterval(function(){
obj.style[prop]=fin-(fin-parseInt(obj.style[prop]))*rozamiento+unidad;
if(parseInt(obj.style[prop])/fin*100 >= 99){
obj.style[prop]=fin+unidad;
clearInterval(i);
}
},tiempo);
}
function easingIn(obj,prop,inicio,fin,tiempo,rozamiento,unidad){
var i=setInterval(function(){
obj.style[prop]=Math.abs(fin-(fin-parseInt(obj.style[prop]))*rozamiento)+unidad;
if(parseInt(obj.style[prop])/fin == 1){
obj.style[prop]=fin+unidad;
clearInterval(i);
}
},tiempo);
}
window.onload=function(){
$('abrir').onclick=function(){
easingOut($('pp'),'width',1,500,10,.6,'px');
easingOut($('pp'),'height',1,500,10,.6,'px');
}
$('cerrar').onclick=function(){
easingIn($('pp'),'width',500,1,10,.6,'px');
easingIn($('pp'),'height',500,1,10,.6,'px');
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input id="abrir" type="button" name="abrir" value="abrir" />
<input id="cerrar" type="button" name="cerrar" value="cerrar" />
<div id="pp" style="background:#FFCC33;position:relative;width:1px;height:1px;overflow:hidden;">hola<br />
hola<br />
hola</div>
</form>
</body>
</html>