if you want something that really catches the eye, use SMIL. you can embed it into the html. nothing needs to be downloaded by the user to run it. as far as i know, IE 5 and above support this. it will give you a very smooth transition. i will give you an example (this example is long and can be confusing since i stripped out a great deal of the code not pertaining to this question. It took me several days to develop this, so if your gonna use it for money...give a shout out to me lol)
<!----all images, design, layout, and source code created by delerium----->
<html xmlns:smil="urn:schemas-microsoft-com:time">
<style>
.time{ behavior: url(#default#time2);}
smil\:* { behavior:url(#default#time2)}
time:* { behavior:url(#default#time2)}
body { background-color:black;color:white;font-family:verdana;font-size:10pt; }
</style>
</head>
<body>
<!-------------------------this begins the navigation bar---------->
<!---test--->
<DIV STYLE="position:absolute; top:65; right:0;">
<smil:par begin="test.click" end="test1.click;test2.click;end.click;" >
<smil:animateMotion begin="0" dur="1" targetElement="test1"
values="0,0;0,75" fill="hold"/>
<smil:animateMotion begin="0" dur="1" targetElement="test2"
values="0,0;0,75" fill="hold"/>
<smil:animateMotion begin="0" dur="1" targetElement="end"
values="0,0;0,75" fill="hold"/>
</smil:par>
<div style="position:relative;top:65;right:0;width:0"id="test" >
<img src="gif/test.gif" width="128" height="79"></a>
</div>
</div>
<!---test1---->
<DIV STYLE="position:absolute; top:144; right:0; ">
<smil:par begin="test1.click" end="test.click;test2.click;end.click" >
<smil:animateMotion begin="0" dur="1" targetElement="test2"
values="0,0;0,100" fill="hold" />
<smil:animateMotion begin="0" dur="1" targetElement="end"
values="0,0;0,100" fill="hold" />
</smil:par>
<div style="position:relative;top:65;right:0;width:0"id="test1">
<img src="gif/test2.gif" width="128" height="79" >
</div>
</div>
<!----------this begins the drop down inside part------------>
<!----drop down for test--->
<DIV STYLE="position:absolute; top:210; right:0; z-index:-2;">
<div CLASS=time end="test1.click;test2.click;test3.click" begin="test.click" style="width:100;height:75;
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr=black, EndColorStr=#333399);font-size:12pt;">
<font color="white" >
<div id="hide" ONCLICK="loadomniaFrame()" onmouseover="this.style.color='#0099FF'" onmouseout=" this.style.background='', this.style.color=''">
<b STYLE="cursor: default"> Choice 1 </b>
</div>
<div id="hide1" ONCLICK="loadmuntarFrame()" onmouseover="this.style.color='#0099FF'" onmouseout=" this.style.background='', this.style.color=''">
<b STYLE="cursor: default">choice 2</b>
</div>
<div id="hide12" ONCLICK="loadexFrame()" onmouseover="this.style.color='#0099FF'" onmouseout="this.style.background='', this.style.color=''">
<b STYLE="cursor: default">choice 3 </b>
</div>
</font>
</div>
</div>
<DIV ID="overlay" STYLE="position:absolute; visibility:hidden; top:212; right:100;">
<IMG SRC="gif/bally.gif" width="15" height="15" >
</DIV>
<DIV ID="overlay1" STYLE="position:absolute; visibility:hidden; top:230; right:100;">
<IMG SRC="gif/bally.gif" width="15" height="15" >
</DIV>
<DIV ID="overlay12" STYLE="position:absolute; visibility:hidden; top:255; right:100;">
<IMG SRC="gif/bally.gif" width="15" height="15" >
</DIV>
</body>
</html>
----------------------------------------------------
sorry, i meant to post this under your thread but some how posted it as a new thread.
also, you will need to supply your own images. if you have any problems with this, let me know. in this example im using filters to make the background a fade too, you can just change the hex value to be black.
another way is to use styles. its not as impressive but does work. goto www.webmonkey.com for a tutorial on that. hope you like
--delerium