jQuery在悬停时动画文本颜色

使用以下代码,尝试在悬停时获取字体颜色动画,类似于我的边框底色动画.更改边框底部颜色效果很好,但字体颜色似乎不会改变.这里可以看到一个完整的例子： 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');
},true).fadeIn({
    'marginTop': "+=30px"
},'slow');
})
jQuery("ul.menu li").hover(function() {
jQuery(this).find("a").stop(true,true).animate({
    'borderBottomColor': '#2E9ECE','color': '2E9ECE'
},function() {
jQuery(this).find("a").stop(true,true).animate({
    'borderBottomColor': '#FFDF85','color': 'FFDF85'
},'slow');
})

解决方法

通过查看你的代码,我可以告诉你,你已经忘记了#css颜色附近,所以代替这个’颜色’：’2E9ECE’使用这个’颜色’：’#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 hover和animate

更新：我已经验证,此代码有效(使用最新版本的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在悬停时动画文本颜色

解决方法

猜你在找的jQuery相关文章