jQuery在hover时动画文本颜色

使用以下代码，尝试在hover时获取字体颜色动画，类似于我的边框底色动画。 更改边框底部颜色效果很好，但字体颜色似乎不会改变。 这里有一个完整的例子： http ： //www.buenolisto.com/alma 。 任何帮助是极大的赞赏。 我也在调用jQuery UI： 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'); })​ 

Answer 1

通过查看你的代码，我可以告诉你，你已经忘记了'color': '2E9ECE'附近，所以代替这个'color': '2E9ECE'使用这个'color': '#2E9ECE' 。 你可能也想要你的风格，我已经重写你最后一次hover到这样的事情：

 $('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 hover和动画

更新 ：我已经validation，此代码有效（使用最新版本的FireFox和Chrome测试）：

        aaa
 bbb