with the effects and slides look into either making your own javascript ones or:
scriptaculous
mootools
Here is the javascript we currently use and it's not smooth at all.
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="setTimeout('zxcCngHeight(\'Test1\',-5,10,200,50,true);',5000);" >
<img src="img/kenwood_910x40.jpg"><br>
<div id="Test1" style="position:relative;overflow:hidden;width:910px;heig ht:200px;background-color:red;" >
<img src="img/kenwood_910x200.jpg" width=910 height:200 >
</div>
<script language="JavaScript" type="text/javascript">
<!--
// Change Width/Height Part 1 Application Notes and Functional Code
// by Vic Phillips (21-Feb-2006) http://www.vicsjavascripts.org.uk
// An elements width or height may be progressively changed or toggled
// to a new specified dimension at specified increments at a specified speed.
// The element may optionally removed (display:none;) when at the minimum dimension.
// The script may be used for Multiple Level Menu and Rotate Image Cube applications.
// There may be as many applications on a page as required.
// Application Notes
// The Code is in Three Parts
// Part 1 - Application Notes and Functional Code
// Part 2 - Multiple Level Menu applications.
// Part 3 - Rotate Image Cube applications.
// For Bespoke Application
// To change the height: Executed by event call to zxcCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly, true)
// To toggle the height: Executed by event call to zxcCngHeightToggle(zxcobj,zxcdir,zxcminh,zxcmaxh,z xcdly,true)
// To change the width: Executed by event call to zxcCngWidth(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,t rue)
// To toggle the width: Executed by event call to zxcCngWidthToggle(zxcobj,zxcdir,zxcminw,zxcmaxw,zx cdly,true)
// where
// parameter 0 = object or object ID name (object or string)
// parameter 1 = the increment < 1 reduce height, > 1 increase height (digits)
// parameter 2 = the minimum height/height (digits)
// parameter 3 = the maximum height/height (digits)
// parameter 4 = (optional) delay (default 100mSec) (digits)
// parameter 5 = (optional) true = remove element when at minimim height (true or null)
// Note:
// Parameters 2,3 and 5 cannot be changed after the first element call
// The speed of execution is controlled by both parameter 1 and parameter 4
// Table Applications
// When applied to a table row the content of each <TD> must be nested in a <DIV>
// with an inline style of position:relative;overflow:hidden;
// e.g.
// <table>
// <tbody >
// <tr >
// <td align="center" onclick="zxcCngHeightToggle('Row2',1,20,130,5,true);" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Down1.gif" >
// </td>
// </tr>
// <tr height=100 id="Row2" style="display:none;" >
// <td align="left" valign="top">
// <div style="position:relative;overflow:hidden;top:0px;left:0px ;width:100%;height:20px;text-align:center;" >
// <br>
// displayed with the 'toggle' event call from the TD above<br>
// <br>
// with progressive display of the content<br>
// <br>
// and 'removed' when at the minimum height.
// </div>
// </td>
// </tr>
// </tbody>
// </table>
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These charactors are easily changed to charactors of choise using global find and replace.
// The functional code(about 4K) is best as an external JavaScript
// Tested with IE6 and Mozilla FireFox
// Functional Code NO NEED to Change
var zxcOOPCnt=0;
function zxcCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly, zxcrmv,zxcl){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.oopch){ zxcobj.level=zxcl||1; zxcobj.oopch=new zxcOOPCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcd ly,zxcrmv); }
clearTimeout(zxcobj.oopch.to);
zxcobj.oopch.dir=zxcdir;
zxcobj.oopch.delay=zxcdly||zxcobj.oopch.delay;
if (zxcdir>0){ zxcobj.style.display=''; }
zxcobj.oopch.cngheight();
}
function zxcCngHeightToggle(zxcobj,zxcdir,zxcminh,zxcmaxh,z xcdly,zxcrmv){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.cnghd){ zxcobj.cnghd=zxcdir; }
else { zxcobj.cnghd*=-1; }
zxcCngHeight(zxcobj,zxcobj.cnghd,zxcminh,zxcmaxh,z xcdly,zxcrmv);
}
function zxcFndHidden(zxcobj,zxcary){
var zxcels=zxcobj.getElementsByTagName('*');
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcels[zxc0].style.overflow=='hidden'){
zxcary.push(zxcels[zxc0]);
}
}
}
function zxcOOPCngHeight(zxcm,zxcdir,zxcminh,zxcmaxh,zxcdly ,zxcrmv){
this.ary=[];
zxcFndHidden(zxcm,this.ary);
this.objS=zxcm.style;
if (!this.objS.position){ this.objS.position='relative'; }
this.obj=zxcm;
this.ext=['none']; // (T = top decrease with height, [1]- obj top)
this.objS.overflow='hidden';
this.ref='zxchs'+zxcOOPCnt;
window[this.ref]=this;
this.hlp=0;
this.minh=zxcminh;
this.maxh=zxcmaxh;
if (this.minh<Math.abs(zxcdir)){ this.minh=Math.abs(zxcdir); }
this.rmv=zxcrmv;
this.dir=zxcdir;
if (zxcdir<0){ this.cnt=this.maxh; }
else { this.cnt=this.minh; }
this.delay=zxcdly||100;
this.to=null;
zxcOOPCnt++;
}
zxcOOPCngHeight.prototype.cngheight=function(){
if ((this.dir<0&&this.cnt+this.dir>this.minh)||(this.dir>0&&this.cnt+this.dir<this.maxh)){
this.objS.height=(this.cnt+=this.dir)+'px';
if (this.ext[0]=='T'){ this.objS.top=(this.ext[1]-parseInt(this.objS.height))+'px'; }
this.chloop();
this.setTimeOut("cngheight();",this.delay);
}
else if (this.dir<0){ this.objS.height=this.minh+'px'; if (this.rmv){ this.objS.display='none'; }; if (this.ext[0]=='T'){ this.objS.top=(this.ext[1])+'px'; }; }
else if (this.dir>0){ this.objS.height=this.maxh+'px'; this.chloop(); }
}
zxcOOPCngHeight.prototype.chloop=function(){
for (this.hlp=0;this.hlp<this.ary.length;this.hlp++){
this.ary[this.hlp].style.height=this.objS.height;
}
}
zxcOOPCngHeight.prototype.setTimeOut=function(zxcf ,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}
function zxcCngWidth(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdly,z xcrmv,zxcl){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.oopcw){ zxcobj.level=zxcl||1; zxcobj.oopcw=new zxcOOPCngWidth(zxcobj,zxcdir,zxcminw,zxcmaxw,zxcdl y,zxcrmv); }
clearTimeout(zxcobj.oopcw.to);
zxcobj.oopcw.dir=zxcdir;
zxcobj.oopcw.delay=zxcdly||zxcobj.oopcw.delay;
if (zxcdir>0){ zxcobj.style.display=''; }
zxcobj.oopcw.cngwidth();
}
function zxcCngWidthToggle(zxcobj,zxcdir,zxcminw,zxcmaxw,zx cdly,zxcrmv){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
if (!zxcobj.cngwd){ zxcobj.cngwd=zxcdir; }
else { zxcobj.cngwd*=-1; }
zxcCngWidth(zxcobj,zxcobj.cngwd,zxcminw,zxcmaxw,zx cdly,zxcrmv);
}
function zxcOOPCngWidth(zxcm,zxcdir,zxcminw,zxcmaxw,zxcdly, zxcrmv){
this.ary=[];
zxcFndHidden(zxcm,this.ary);
this.objS=zxcm.style;
if (!this.objS.position){ this.objS.position='relative'; }
this.obj=zxcm;
this.ext=['none']; // (L = left decrease with height, [1]- obj left)
this.objS.overflow='hidden';
this.ref='zxcws'+zxcOOPCnt;
window[this.ref]=this;
this.wlp=0;
this.minw=zxcminw;
this.maxw=zxcmaxw;
if (this.minw<Math.abs(zxcdir)){ this.minw=Math.abs(zxcdir); }
this.rmv=zxcrmv;
this.dir=zxcdir;
if (zxcdir<0){ this.cnt=this.maxw; }
else { this.cnt=this.minw; }
this.delay=zxcdly||100;
this.to=null;
zxcOOPCnt++;
}
zxcOOPCngWidth.prototype.cngwidth=function(){
if ((this.dir<0&&this.cnt+this.dir>this.minw)||(this.dir>0&&this.cnt+this.dir<this.maxw)){
this.objS.width=(this.cnt+=this.dir)+'px';
if (this.ext[0]=='L'){ this.objS.left=(this.ext[1]-parseInt(this.objS.width))+'px'; }
this.setTimeOut("cngwidth();",this.delay);
}
else if (this.dir<0){ this.objS.width=this.minw+'px'; if (this.rmv){ this.objS.display='none'; }; if (this.ext[0]=='L'){ this.objS.left=(this.ext[1])+'px'; }; }
else if (this.dir>0){ this.objS.width=this.maxw+'px'; }
}
zxcOOPCngHeight.prototype.cwloop=function(){
for (this.wlp=0;this.wlp<this.ary.length;this.wlp++){
this.ary[this.wlp].style.width=this.objS.width;
}
}
zxcOOPCngWidth.prototype.setTimeOut=function(zxcf, zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}
//-->
</script>