jQuery MagicLine導航 - 在第一個鏈接上線較大？

我想知道是否有人可以幫助我解決這個問題與jQuery MagicLine導航（http://css-tricks.com/jquery-magicline-navigation/）jQuery MagicLine導航 - 在第一個鏈接上線較大？

似乎是當頁面加載李id =「magic-line」似乎比「Home」鏈接上的大10倍。當您將鼠標懸停在主頁鏈接上時，該線條會將尺寸縮小至應有的尺寸。

導航是http://www.jonasbabrauskas.com/jncustoms

在html

似乎當鼠標懸停頂部從77px寬度移動到具有58px的。有沒有人有一個解決方案，當鼠標懸停在它上面時，我能如何獲得它的正確尺寸？所有其他鏈接似乎工作得很好。我也嘗試過使用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; 
}

來源

2012-01-15 EpzOne

誰能給我一個手呢？ – EpzOne 2012-01-17 20:00:52

我在使用谷歌從Web字體（特別是，我使用「亞伯的字體相同的問題'在這裏找到：http://www.google.com/webfonts/specimen/Abel）。當我刪除字體樣式時，魔術線條正確對齊。似乎是一個無賴，因爲我真的想使用字體和酷魔術線！我不知道是否有方法將兩者結合起來，但我可以確認問題似乎來自同時使用字體和魔術線。

編輯：我找到了解決方案！ MagicLine Navigation: Problem with @font-face embedded fonts!答案似乎是確保jQuery腳本在字體完全加載後加載，以確保腳本使用所有正確的寬度。從他們的網站：

相反的：

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

我的腳本現在開始：

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

來源

2012-08-07 16:52:46 TheaterGirl62

jQuery MagicLine導航 - 在第一個鏈接上線較大？

回答

相關問題