By looking at your code I can tell that you've forgotten # near css colors, so instead of this 'color': '2E9ECE' use this 'color': '#2E9ECE'. You may also want to work on your style, I have rewritten your last hover to something like this:
$('ul.menu li a').hover(
function() {
// do this on hover
$(this).animate({
'borderBottomColor': '#2E9ECE',
'color': '#2E9ECE'
}, 'slow');
},
function() {
// do this on hover out
$(this).animate({
'borderBottomColor': '#FFDF85',
'color': '#FEFEFE'
}, 'slow');
}
);
which, in my opinion, is more readable and shorter. Take a look at jQuery API hover and animate
UPDATE: I've verified, this code works (tested with newest versions of FireFox and Chrome):
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").hover(
function() {
$(this).animate({ color: "#00ff00" }, 'slow');
},function() {
$(this).animate({ color: "#ff0000" }, 'slow');
});
});
</script>
</head>
<body>
<a href="#">aaa</a><br />
<a href="#">bbb</a><br />
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
