jQuery MagicLineナビゲーション - 最初のリンクの行が大きいですか？

Question

誰でもjQueryのMagicLineナビゲーションで、この問題を解決する上で私を助けることができれば、私は思っていた（http://css-tricks.com/jquery-magicline-navigation/）

ページは、Liをロードするときことをしているように見えますid = "magic-line"は、 "Home"リンク上に表示されるよりも常に10倍大きくなるようです。ホームリンク上にマウスを置くと、線はサイズを小さくする必要があります。

ナビゲーションは、マウスが、トップの上に推移したとき58pxのとに77pxの幅から移動しているようだHTMLでhttp://www.jonasbabrauskas.com/jncustoms

です。マウスがその上に乗っていないときに、どのように正しいサイズにすることができるかについて誰かが解決策を持っていますか？その他のリンクはすべて正常に動作するようです。私はLavaLampプラグインを使ってみましたが、同じ問題がありました。私がナビゲーションのために使った@ font-faceが原因であるかどうかはわかりません。

ここは私のコードです。ありがとうございました。

jQueryの

$(function() { 

var $el, leftPos, newWidth; 
    $mainNav2 = $("#example-two"); 

/* 
    EXAMPLE ONE 
*/ 

/* Add Magic Line markup via JavaScript, because it ain't gonna work without */ 
$("#example-one").append("<li id='magic-line'></li>"); 

/* Cache it */ 
var $magicLine = $("#magic-line"); 

$magicLine 
    .width($(".current_page_item").width()) 
    .css("left", $(".current_page_item a").position().left) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width()); 

$("#example-one li").find("a").hover(function() { 
    $el = $(this); 
    leftPos = $el.position().left; 
    newWidth = $el.parent().width(); 

    $magicLine.stop().animate({ 
     left: leftPos, 
     width: newWidth 
    }); 
}, function() { 
    $magicLine.stop().animate({ 
     left: $magicLine.data("origLeft"), 
     width: $magicLine.data("origWidth") 
    });  
}); 
}); 

HTML

<ul class="group" id="example-one"> 
     <li class="current_page_item"> 
      <a href="#">Home</a> 
     </li> 
     <li><a href="#">Buy Tickets</a></li> 

     <li><a href="#">Group Sales</a></li> 
     <li><a href="#">Reviews</a></li> 
     <li><a href="#">The Show</a></li> 

    </ul> 

CSS

#example-one { 
    margin: 0 auto; 
    list-style: none; 
    position: relative; 
    width: 500px; 
} 
#example-one li { 
    display: inline-block; 
} 
#example-one a { 
    float: left; 
    padding: 6px 10px 4px 10px; 
} 
#example-one a:hover { 
    color: #000; 
} 
#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    background: #000; 
} 
.current_page_item a { 
    color: #000 !important; 
} 
.ie6 #example-one li, .ie7 #example-one li { 
    display: inline; 
} 
.ie6 #magic-line { 
    bottom: -3px; 
}  

Answer 1

私は（具体的には、私は「アベルを使用しているGoogleウェブフォントからフォントを使用して同じ問題を抱えています'が見つかりました：http://www.google.com/webfonts/specimen/Abel）。フォントスタイリングを削除すると、魔法の行が正しく整列します。私はフォントとクールな魔法の両方のラインを本当に使いたいと思って以来、バマーに見えます！私は2つの方法を組み合わせる方法があるかどうかはわかりませんが、フォント面と魔法線を同時に使用することによって問題が発生しているように見えます。

編集：解決策を見つけました。 MagicLine Navigation: Problem with @font-face embedded fonts!答えは、スクリプトがすべての正しい幅で機能していることを確認するために、フォントが完全にロードされた後にjQueryスクリプトがロードされていることを確認するようです。自分のサイトから：

の代わりに：

jQuery(document).ready(function($) { 

私のスクリプトは、今で始まる：

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