jquery - MagicLine jQuery - 下划线的长度

Question

我尝试在我的网站上使用 MagicLine jQuery Navigation，但遇到了一个小问题。 我希望下划线与当前突出显示的单词一样长。相反，它长了几个像素，我根本无法处理。我试图用 CSS 修复它，但我失败了。我相信这个问题的解决方案可以在 jQuery 代码中找到，但我不熟悉它所以我向你寻求帮助。 如何缩短jQuery中下划线的长度？

Here你可以找到 MagicLine jQuery Navigation 和 here我的问题的图形描述。

Answer 1

我做了一些调整以使其适合您的要求

$("#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