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'); }
                                        }
                                    );

        });