将 jquery 菜单动画重置为当前选择的菜单选项答案

【问题标题】：reseting jquery menu animation to currently selected menu option将 jquery 菜单动画重置为当前选择的菜单选项
【发布时间】：2012-11-23 12:23:17
【问题描述】：

我正在为我的网站制作导航菜单，其工作原理如下：有导航、箭头和主要内容。当您加载页面时，箭头指向导航中的主页选项，当您将鼠标悬停在其他选项上时，它会移动到当前悬停的选项，当鼠标离开导航时，它会返回主页选项。

我设法在主页上做到了，但现在我在其他 6 个页面上遇到了问题。我不知道如何使箭头始终返回具有 href="#" 的导航选项，而不是始终返回主页选项。导航是垂直的。

这是我的代码：

$(document).ready(function() {

$('#arrow').css({'marginTop' : top});

$('ul li h3').hover(function(){

     var top = $(this).parent().position().top; //getting margin-top value of hovered element


$('#arrow').stop().animate({
    'marginTop' : top-115 //setting margin top,and removing 115px for aesthetics 

    });
},function(){
    $('#arrow').stop().animate({
    'marginTop' : 10 //here i set margin-top to 10 because that is where home option is
    })
});
});

我知道我可以通过为每个页面制作 .js 文件来解决这个问题，并为每个页面设置不同的默认 margin-top 值，但这样我不会学到任何新东西，我正在制作这个网站来练习。

提前致谢，多布里卡

【问题讨论】：

标签： jquery animation menu hover

【解决方案1】：

没有测试，但如果不工作，它可能会非常接近。

在$(document).ready()的开头声明var top；

var top = $('ul li h3 a[href=#]').position().top;

并运行您正在使用的脚本，将箭头设置为动画到该位置。

基本上你是在href值中选择带有“#”的锚点，你得到它的顶部并将其设置为初始顶部值

【讨论】：

我只是把它改成了 var top1，它就像一个魅力。非常感谢:)