Question

使用以下代码，尝试在悬停时设置字体颜色动画，类似于我的边框底色动画。更改边框底部颜色效果很好，但字体颜色似乎不会改变。这里可以看到一个完整的例子：http://www.buenolisto.com/alma。任何帮助是极大的赞赏。我也在用https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js

调用jQuery UI

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

通过查看您的代码，我可以告诉您，您已经忘记了＃靠近css颜色，所以不要使用 'color': '2E9ECE' 来使用此 { {1}} 即可。你可能也想要你的风格，我已经重写了你最后一次悬停到这样的事情：

'color': '#2E9ECE'

在我看来，它更具可读性和更短。看一下jQuery API hover和animate

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

$('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在悬停时动画文字颜色

1 个答案: