Question

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

但是，当页面首次加载时，我遇到“selector”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();
} );

Answer 1

尝试使用

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

而不是

$( document ).ready( function() {

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

希望这能解决你的问题。

初始化动画div时定位错误

1 个答案: