0

我的网站导航中有一条“魔术线”（如果我已经在该 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);
    });
});

我发现了一些奇怪的行为。每个浏览器都略有不同，但趋势是相同的：当我点击菜单元素时——它会转到正确的位置（比如说左边 260 像素），我可以一次又一次地点击，但它仍然在那里。但是当我按 F5 （或只是输入网址）时，它出现在稍微不同的位置（左 256 像素）。所以，我点击同一个元素，它又回到了正确的位置。如果我不停止，它可能会发生巨大变化，并且在 F5 出现在正确位置之后。

So what is the reason this behavior? Is it saves state somehow? What is the difference between F5 and just clicking? Only cause that I see at this moment is my django development webserver which is fully synchronously, slow and non-caching, but I can't check it on production server.

4

1 回答 1

1

So, the problem was in custom fonts used in menu (@font-face) and the related width. If font is changed to one from the safe list (Arial, Verdana) it's rendered and behaves as I expect, but when custom typeface is used it's collapses. By the way, the browser's JS console gave me this warning: "Resource interpreted as Font but transferred with MIME type application/x-font-otf", but I don't sure whether it related to the problem somehow.

And my solution is simply declare the width for each element, so browser can render it correctly from outset.

于 2012-06-01T19:50:05.957 回答