jquery - フェード効果のあるメニュー ホバー

Question

私はこのメニュー構造を持っています：

http://jsfiddle.net/Rochefort/szL2C/

全て大丈夫。しかし、jQueryを介してホバー効果がフェードしたいです。これどうやってするの？

Answer 1

次のように、css3 でトランジションを使用してこれを実現できます。

.menu-item
{
    // In the transition you define the property that 
    // you want a transition attached to and the duration
    transition: background .5s;
    -moz-transition: background .5s; /* Firefox 4 */
    -webkit-transition: background .5s; /* Safari and Chrome */
    -o-transition: background .5s; /* Opera */
}

.menu-item:hover
{
    background: #CCC; // Or whatever color you choose
}

ソース: http://www.w3schools.com/css3/css3_transitions.asp

編集

あなたの問題に対するjQueryの解決策は次のとおりです。

$(document).ready(function(){
    $('#right_menu li').hover(function() {
        $(this).animate({ backgroundColor: "#002C6A" }, 'fast');
    },
    function() {
        $(this).animate({ backgroundColor: "#ffffff" }, 'fast');
    });
});

ただし、ここにあるjQueryカラー ライブラリを含める必要があります。また、css で設定した :hover background-color を削除する必要があります。

お役に立てれば。

Answer 2

Yan Kun が言ったように、jquery カラー アニメーション ライブラリを含める必要があります: http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js

コードの挿入を改善します。stop()マウスが数回上にあるときのループを避けるために文。

$('.links yan-menu li a ').hover(function() {
    $(this).stop();
    $(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
    $(this).stop();
    $(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});

Answer 3

これとjquery color animations pluginに必要なコードは数行だけです。

$('.links yan-menu li a ').hover(function() {
    $(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
    $(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});

もちろん、CSSコードを削除して、コードをページに適切に追加する必要があります