0

我正在创建一个带有一系列链接的水平菜单栏。在当前页面链接下方，有一个绝对定位的 div，其大小固定，背景为黑色。当任何其他链接悬停时，此“选择指示器”会滑到悬停链接下方。我已经设法根据需要创建了这种效果。

但是，当页面首次加载时，我遇到了“选择器”div 的位置问题。出于某种原因，div 将它的初始位置设置为它应该在的位置（在当前页面链接下方）的左边正好 5 个像素。我使用与动画本身相同的代码来初始化 div，并且该错误仅在加载页面时出现。只要将链接悬停在上方，“选择器”就会滑入正确的位置，直到页面被刷新/重新加载。

可以在www.jamiedavies.me找到菜单（和错误）的工作示例

这是我的导航栏的html结构：

<header>
    <h1>Main Title</h1>
    <nav id="mainNav">
        <ul>
            <li><a href="#1" title="Link1" class="current">Link1</a></li>
            <li><a href="#2" title="Link2">Link2</a></li>
            <li><a href="#3" title="Link3">Link3</a></li>
            <li><a href="#4" title="Link4">Link4</a></li>
        </ul>
    </nav>
    <div id="pageSelector"></div>
</header>

这是相关的CSS：

nav#mainNav {
   position: absolute;
   right: 0px;
   top: 63px;
}

nav#mainNav ul li {
   display: inline;
   list-style-type: none;
   margin-left: 35px;
}

div#pageSelector {
   height: 5px;
   left: -999px;
   position: absolute;
   top: 91px;
   visibility: hidden;
   width: 25px;
}

这是负责为选择器设置动画的 javascript/jquery 代码：

$( document ).ready( function() {

    var offset = $( "header" ).offset().left;

    $( "#pageSelector" ).css( "visibility", "visible" );

    $( "#mainNav li" ).find( "a" ).each( function( i ) {
        $( this ).mouseover( function( e ) {
            var l = $( this ).offset().left - offset;
            var w = $( this ).width();
            $( "#pageSelector" ).animate( {
                left: l,
                width: w
            }, 175, "swing" );
        } );
    } );

    $( "#mainNav" ).mouseleave( function( e ) {
        $( "#pageSelector" ).animate( {
            left: $( "#mainNav li a.current" ).offset().left - offset,
            width: $( "#mainNav li a.current" ).width()
        }, 175, "swing" );
    } );

    $( "#mainNav" ).mouseleave();
} );
4

1 回答 1

1

尝试使用

$(window).bind("load", function() {

代替

$( document ).ready( function() {

因为，动画脚本似乎在其他元素应该首先加载之前完成了执行，例如您的特殊字体和图形，这很可能导致对齐计算中的数学错误。

希望这能解决您的问题。

于 2012-06-18T00:22:35.100 回答