jquery - 背景画像アニメーション付きの JQuery メニュー

Question

私はこれを持っています: http://jsfiddle.net/bnNSW/ 機能的なナビゲーション メニューが欲しいです。どのように？

1. クリックすると、ページを選択してリンクするには、背景が下に移動する必要があります。同時に、選択された別のタブが上にアニメーション化する必要があります。
2. ホバー バックグラウンドでは、すべてのタブが選択可能であることをユーザーに説明するためのヒントのみを表示する必要があります。

コード？

更新: これは私が取り組んでいるサイトですhttp://www.accastelli.com.ar/

Answer 1

デモを見る

$("#nav li a").hover(
function () {
    //$("#nav li a li").css({'background-position-y':'-102px'});
    if( $(this).parent('li').not('select') ){
        $(this).parent('li').animate({'background-position-y':'-82px'},300);
    }
},
function () {
    if( $(this).parent('li').not('select') ){
        $(this).parent('li').animate({'background-position-y':'-102px'},300);
    }
}
);

$('#nav li a').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('#nav li').animate({'background-position-y':'-102px'},300,function(){ $('#nav li').removeClass('select');});

      $(this).parent('li').animate({'background-position-y':'0'},300,function(){$(this).addClass('select')});
});

Answer 2

これを試してください

 $("#nav li a").hover(
    function () {
        if ($(this).parent('li').not('select')) {
            $(this).parent('li').animate({ 'background-position-y': '-82px' }, 300);
        }
    },
    function () {
        if ($(this).parent('li').not('select')) {
            $(this).parent('li').animate({ 'background-position-y': '-102px' }, 300);
        }
    }
);

        $('#nav li a').click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).parents().find('li').removeClass('select');
            $(this).parent('li').animate({ 'background-position-y': '0' },
                                        {
                                            duration: 300,
                                            complete: function () { $(this).addClass('select'); }
                                        }
                                    );

        });