jQuery Animate text-color on hover [英] jQuery Animate text-color on hover
问题描述
使用以下代码，尝试获取字体颜色以悬停动画，类似于我有边框底色动画。更改边框底部颜色效果很好，但字体颜色只是不会改变。完整的示例如下所示： http://www.buenolisto.com/alma 。任何帮助是非常感激。我也已经在调用jQuery UI： https： //ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js
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');
})
推荐答案
代码我可以告诉你，你忘了css颜色附近的＃，所以代替这 'color'：'2E9ECE' strong>使用此 'color'：'＃2E9ECE' 。你可能还想改变你的风格，我已经重写你最后一次悬停到这样的东西：
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');
}
);
这在我看来更可读和更短。查看jQuery API 悬停和动画
which, in my opinion, is more readable and shorter. Take a look at jQuery API hover and animate
UPDATE ：我已验证，此代码适用（使用最新版本的FireFox和Chrome测试） p>
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>
这篇关于jQuery Animate text-color on hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
