带有背景图像动画的 JQuery 菜单答案

【问题标题】：JQuery menu with background image animation带有背景图像动画的 JQuery 菜单
【发布时间】：2012-10-04 13:08:43
【问题描述】：

我有这个：http://jsfiddle.net/bnNSW/ 我想要一个功能导航菜单。怎么样？

点击时背景必须动画到底部才能选择和链接到页面。同时，另一个选定的选项卡必须以动画方式显示在顶部。
悬停背景必须仅显示提示以展示用户所有选项卡都是可选的。

代码？

更新：这是我正在开发的网站http://www.accastelli.com.ar/

【问题讨论】：

标签： jquery html css

【解决方案1】：

见demo

$("#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')});
});

【讨论】：

我上传了最后一个代码。一次选择两个按钮时出现故障。差不多了。感谢您的所有帮助。
我还上传了指向我正在工作的页面的链接。我包含了 .parentsUntil("#nav") 以避免代码干扰本网站中的其他链接。
在点击功能中更新了我的代码$('#nav li').removeClass('select');请立即尝试
我认为父函数没有正确处理 html 中的 li。有没有办法在每个 li 上递归地应用 removeClass func，无论有多少？这首先是问题所在。谢谢你的帮助。我很讨厌 jQuery，为我设计的网页编写代码简直是一场噩梦。
` $('#nav li').removeClass('select');` 应该递归地从 li 中删除所有选择并且您还没有更新代码

【解决方案2】：

试试this

 $("#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'); }
                                        }
                                    );

        });

【讨论】：

动画在jsfiddle.net/UE9B2 不工作不知道确切原因，但是如果你从链接中复制这些脚本并在你的系统上正确运行它们，它肯定也可以在 Chrome 上工作。