Response title
This is preview!
animate/fadeIn/fadeTo/fadeOut Background-Color Problem
in Using jQuery
•
13 years ago
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.
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.
1
