悬停时的jQuery动画文本颜色文本、颜色、动画、jQuery

由网友(回眸忆红颜)分享简介：使用下面的代码，尝试让字体颜色在悬停时进行动画处理，类似于我的边框底部颜色动画处理方式.更改边框底部颜色效果很好，但字体颜色似乎不会改变.一个完整的例子可以在这里看到:http://www.buenolisto.com/alma.任何帮助是极大的赞赏.我也已经在调用 jQuery UI:https://ajax.goo...

使用下面的代码，尝试让字体颜色在悬停时进行动画处理，类似于我的边框底部颜色动画处理方式.更改边框底部颜色效果很好，但字体颜色似乎不会改变.一个完整的例子可以在这里看到: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' 使用这个 '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 hover 和动画

which, in my opinion, is more readable and shorter. Take a look at jQuery API hover and animate

更新:我已验证，此代码有效(已使用最新版本的 FireFox 和 Chrome 进行测试):

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 ；发布时间：2023-09-07 22:15:28