2

次のコードを使用して、ホバー時にフォントの色をアニメーション化しようとしています。これは、border-bottom-colorをアニメーション化する方法と似ています。border-bottom-colorの変更はうまく機能しますが、フォントの色は変更されないようです。完全な例はここで見ることができます： http ：//www.buenolisto.com/alma 。どんな助けでも大歓迎です。私はすでにjQueryUIを次のように呼び出しています：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');
})​
4

1 に答える 1

9

あなたのコードを見ると、# near css の色を忘れていることがわかるので、代わりに this'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 のホバーとアニメーションを見てみましょう

更新:私は確認しました、このコードは動作します (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>
于 2012-06-13T15:47:50.287 に答える