在重新加载页面的情况下奇怪的 JQuery 行为

我网站的导航中有一条"魔术线"（它是悬停菜单元素下的幻灯片，如果我已经在该 URL 上，请保留在那里）。

$(function() {
    var $el, leftPos, newWidth, $mainNav = $("#menu");
    $mainNav.append("<li id='magic-line'></li>"); // line with position
                                                    // absolute
    var $magicLine = $("#magic-line");
    // initialization
    if ($('.selected')[0].id == 'logo') { // we're on the main page
        $magicLine.width(1) // just hide
        .css({
            "left" : 100
        }).data("origLeft", 100).data("origWidth", 1);
    } else { // we're on the not-main page
        off = parseInt($('#menu > .selected').css('padding-left').slice(0, -2));
        leftPos = $("#menu > .selected").position().left + off;
        $magicLine.width($(".selected").width()) // stay under the menu
                                                    // element
        .css("left", leftPos).data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width())
    }
    $("#menu > .nav-item").hover(function() { // go under the menu element
        $el = $(this);
        newWidth = $el.width();
        off = parseInt($el.css('padding-left').slice(0, -2));
        leftPos = $el.position().left + off;
        $magicLine.stop().animate({
            left : leftPos,
            width : newWidth
        }, 200);
    }, function() {
        $magicLine.stop().animate({
            left : $magicLine.data("origLeft"),
            width : $magicLine.data("origWidth")
        }, 200);
    });
});

我发现了一些奇怪的行为。每个浏览器都略有不同，但趋势是相同的：当我单击菜单元素时 - 它转到正确的位置（假设左 260px），我可以一次又一次地单击，但它仍然存在。但是当我按 F5（或只是输入 url）时，它出现在略有不同的位置（左 256px）。因此，我单击相同的元素，它再次位于正确的位置。如果我不停止，它可能会发生巨大变化，并且在 F5 出现在正确的位置之后。

那么这种行为的原因是什么呢？它以某种方式保存状态吗？F5 和仅单击有什么区别？我目前看到的唯一原因是我的 django 开发 Web 服务器是完全同步、缓慢且非缓存的，但我无法在生产服务器上检查它。