悬停时的 jQuery 动画文本颜色

标签 jquery fonts colors hover jquery-animate

使用以下代码,尝试让字体颜色在悬停时设置动画,类似于我的边框底部颜色动画。更改边框底部颜色效果很好,但字体颜色似乎不会改变。完整的示例可以在这里看到: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');
})​

最佳答案

通过查看你的代码,我可以看出你忘记了 css 颜色附近的 #,所以用 'color': '2E9ECE' 使用此'color': '#2E9ECE'。您可能还想改进您的风格,我已将您的最后一次悬停重写为如下所示:

$('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 hoveranimate

更新:我已经验证,此代码有效(使用最新版本的 FireFox 和 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 动画文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11018483/

相关文章:

javascript - 可以动态分配 bPopup 触发器和目标 div 吗?

html - 调整 Bootstrap 大小后文本颜色变回

javascript - 当用户单击滚动页面的 anchor 链接时,是否可以禁用 .scroll 函数?

javascript - DOM 元素返回未定义

java - 获取 FontMetrics StackOverflowError

google-chrome - "Impact"字体不适用于移动版 Chrome

css - 如何在 jQuery UI 主题中获取主要/次要颜色

android - 快速改变位图的颜色

Matlab - 根据参数自定义表面颜色

javascript - 表单操作值未从 attr() 函数获取