Javascript 导航菜单中的魔线问题

我试图在我的网站的菜单中添加一条“魔线”：

我一直遵循这个指南：

一开始它是有效的（有时它也能正常工作），但大多数时候它比它应该的更靠右，宽度也比它应该的更宽。有人能解释一下为什么会这样吗？我怎样才能自己“调试”它来得出这个结论呢

我已经硬编码了导航的宽度，但我不确定这是否是问题所在

这是我的JS：

(function($) {

var $el, leftPos, newWidth,
    $mainNav = $("#top-menu");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");


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


$("#top-menu li a").hover(function() {
    $el = $("#top-menu li a:hover");
    leftPos = $el.parent().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")
    });    
});
})(jQuery);

我试着使用它，所以当任何菜单项中都没有当前的页面项类时，我会硬编码它应该得到的位置和宽度（总是第二个菜单项）。但不管怎样，我去掉了它，仍然不起作用

---

如果有人能解释整个情况那就太好了，因为我迷路了。如果需要更多信息，请告诉我。

无论何时缓存页面，它都会起作用，因此这似乎是一个时间问题。要进行验证，可以为init尝试setTimout（）。我不确定页面上还运行了哪些脚本，但我会尝试逐一注释它们。另一种可能是图像导致了问题，但这不太可能，因为#顶部菜单有一个设置的宽度。您能解释一下您打算在哪里执行setTimeout（）吗？我想知道，现在我已经完成了这个网站，是否可以安装任何缓存插件。我想这也会有帮助。查看此链接：了解更多信息。但基本上，您可以将代码的触发延迟约10毫秒，以确保在其他可能导致代码在错误时间触发的事件之后触发。

if($(".current_page_item").length != 0) {
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
} else {
    $magicLine
        .width(114)
        .css("left", 85)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
}