jQuery Animate text-color on hover
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>
Comments
-
john-marcello almost 2 years
Using the following code, trying to get the font color to animate on hover, similar to how I have the border-bottom-color animating. Changing the border-bottom-color works well but the font color just won't seem to change. A full example can be seen here: http://www.buenolisto.com/alma. Any help is greatly appreciated. I am also already calling the jQuery UI in with: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js
jQuery("li.social").hover(function() { jQuery(this).find("img").stop(true, true).animate({ 'marginTop': "-=20px" }, 'fast'); }, function() { jQuery(this).find("img").stop(true, true).animate({ 'marginTop': "+=20px" }, 'fast'); }) jQuery("li.reservas").hover(function() { jQuery(this).find("img").stop(true, true).fadeOut({ 'marginTop': "-=30px" }, 'slow'); }, function() { jQuery(this).find("img").stop(true, true).fadeIn({ 'marginTop': "+=30px" }, 'slow'); }) jQuery("ul.menu li").hover(function() { jQuery(this).find("a").stop(true, true).animate({ 'borderBottomColor': '#2E9ECE', 'color': '2E9ECE' }, 'slow'); }, function() { jQuery(this).find("a").stop(true, true).animate({ 'borderBottomColor': '#FFDF85', 'color': 'FFDF85' }, 'slow'); })