animate/fadeIn/fadeTo/fadeOut Background-Color Problem

animate/fadeIn/fadeTo/fadeOut Background-Color Problem

Hello there

Firstly, thank you for reading my post- Appreciate it.

Im really dead tired. Out of solutions and well.. Just dead and outta coffee. :| And am quite frustrated at my current situation. Spent about.. 10hrs plus trying to solve this.

Alright here's the issue - Im trying to get the "background-color" for an "li" to change from transparent to white. I know this sounds weird but its got to do with the design of the site.

So I looked up a handful of sites but each solution given was in vain. I searched the forum too..
http://jqueryhelp.com/viewtopic.php?t=3 ... roundcolor

So I'm begging. Before I start ramming my head into the keyboard. Please leave some advice or a solution if you can.. Thanks a lot!!!

Heres my code: (the necessary)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<script type="text/javascript" src="js/jquery-1.3.2"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>

<meta http-equiv="content-type" content="text/html; charset=ISO-
8859-1">

<script type="text/javascript">
$(document).ready(function(){
$("div#headerMiddleContainer div#headerMiddleMenuContainer ul
li").mouseover(function(){
$(this).stop();
$(this).animate({backgroundColor:
"#2481c8"},"slow").animate({backgroundColor: "#000"},"slow");
});
});
</script>

</head>

<body>
<div id="headerWrap">

<div id="headerArchitechture">
</div>

<div id="headerRightContainer">
<div id="headerRightContainerText">
</div>
</div>

<div id="headerLeftContainer">
</div>

<div id="headerMiddleContainer">
<div id="headerMiddleMenuContainer">
<ul><li><a> etc </a><li><ul>
</div>
</div>
.....................etc

</body>
</html>

==================
CSS

div#headerMiddleMenuContainer li
{
float: left;
list-style: none;

background-color: transparent;
}
==================


I tried codes along these lines too:
$(document).ready(function(){
$("div#headerMiddleMenuContainer ul li").hover(
function ()
{
$(this).animate({background-color:"white"}, 1500 );

/*$(this).css("background-color", "#FFFF99").fadeIn("slow");*/
/*$(this).fadeTo(300, 1.0, function () {$(this).css({'background-color':'white'})});*/
/*$(this).css({'background-color':'white'}).fadeIn("slow");*/
},
function ()
{
$(this).animate({background-color:"transparent"}, 1500 );

/*$(this).fadeTo(300, 1.0, function () {$(this).css({'background-color':'white'})});*/
/*$(this).css({'background-color':'transparent'}).fadeIn("slow",1.0);*/
/*$(this).css({'background-color':'transparent'}).fadeIn("slow");*/
}
);

});

==================
Thanks again! sry abt the messy-ness.