Hello everyone,

I'm trying to duplicate the functionality of this site's left navigation rollovers, and I think I have a good idea on how to do it, but the execution isn't working the way I want it to. Here's how I want to do it in pseudocode:

1. onHover {
2.  mouseOver () {
3.         // move the <span> out of the <div>'s viewable area.
4.         // The <div> contains the <span> and its overflow is set to hidden
5.         // Make the text 'scroll' up
   
6.         this.animate ( top: -50px )
7.         // now set its position to below the <div>
   
8.         .css (top: 50px)
9.         // now 'scroll' up from the bottom
10.         .animate (top: 0px)
11.         // apply a hover class
    
12.         .addClass (hover)
    
13. },
14.  mouseOut () {
15.         // Do the same as mouseOver
16. }

The problem with this is two-fold: 1. It applies the css rule before it animates, and 2. it doesn't execute any animate actions after the css rule is set, so all you see is the text kinda scrolling up and that's it.

If it helps, another behavior I noticed is it kind of "resets" itself when you mouse over, even if the span's innerHTML isn't there. Kinda weird if you ask me, but it might have something to do with my css settings.

TIA!

Eugene "Eggers"