MagicLine jQuery - 下劃線的長度

我試圖在我的網站上使用MagicLine jQuery導航，但我遇到了一個小問題。我希望下劃線與它當前突出顯示的單詞一樣長。相反，它只有幾個像素，我根本無法處理。我試圖用CSS修復它，但我失敗了。我相信這個問題的解決方案可以在jQuery代碼中找到，但我不熟悉它，所以我要求你的幫助。 如何縮短jQuery下劃線的長度？MagicLine jQuery - 下劃線的長度

Here你可以找到MagicLine jQuery Navigation和here我的問題的圖形描述。

來源

2013-02-08 Adam

你可以創建一個http：// jsfiddle.net/ –

@ArunPJohny不幸的是，我不知道爲什麼，但MagicLine在jsfiddle中不起作用。但你可以在這裏找到我的網站的預覽[鏈接] http://przewoski.com/v2/ – Adam

我做一些調整，使之符合您的需求

$("#example-one li").find("a").hover(function() { 
    $el = $(this); 
    var padding = ($el.outerWidth() - $el.width())/2; 
    console.log($el.outerWidth(),$el.width(), padding) 
    leftPos = $el.position().left + padding; 
    newWidth = $el.width(); 

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

還需要改變current_page_item也

var $currentItem = $(".current_page_item a"); 
var padding = ($currentItem.outerWidth() - $currentItem.width())/2; 

$magicLine 
    .width($currentItem.width()) 
    .css("left", $currentItem.position().left + padding) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width());

演示：Fiddle

來源

2013-02-08 13:03:58

謝謝，這幾乎是我想要的！雖然還有一件事。「.current_page_item」裏面的下劃線（本例中的「HOME」）仍然延伸到詞外。你可以看到它在盤旋和離開時的差異。你能做點什麼嗎？ – Adam

@AdamPrzewoski更新 –

非常感謝！你是我的主人！ :) – Adam

我找到了解決辦法.navigation ul li.active { margin-right: -10px; }

你需要給這個CSS它。

來源

2013-02-08 12:37:55

不幸的是，這不是一個解決方案。在這裏，你可以看到**之前** [之前] http://przewoski.com/v2和**之後** [之後] http://przewoski.com/v2/v2.1 – Adam

我試過它通過檢查元素。 –

我可以檢查並讓你再次知道。 –

MagicLine jQuery - 下劃線的長度

回答

相關問題