fading to red

fading to red

Sorry for the basic question.  I'll be up to speed soon, I think.

I have menu links now where the displayed text snaps from white to red when you hover over them:

div#navbar li a {
background: url(../media/ButtonColumnLight.png) repeat-x;
font-family:Verdana; 
font-size: 18px;
letter-spacing: -1px;
line-height:25px;
text-decoration:none;
color:white;   
float: left;
height:30px;  
width: 161px;  
        text-align: center;
        border:0;
        outline: none;

}
div#navbar li a:hover {
color:red;  
}

I'd like to use jQuery to make the link text  change slowly from white to red when the link is hovered over, instead of snapping. I thought of binding a .hover  (function()  to $(navbar li a)  but how do I include all of the styling I have now for the mouseout case?   If someone could sketch out the proper way to do  this with jQuery it would be very instructive.

Thanks for your help.
    • Topic Participants

    • stva