熔岩灯导航jQuery Firefox

我的熔岩灯导航遇到了一个奇怪的问题。它是根据杰弗里·韦的《熔岩灯》改编的。 熔岩灯的代码在底部。问题主要出现在firefox（我使用的是FF6）中，但在Chrome和Safari（但不是IE9）中偶尔也会出现：加载页面时，菜单项上方的橙色线条有时太长，太偏右。当我将鼠标悬停在项目上时，它会以项目为中心，并保持在那里，就像它从一开始就应该保持的那样。 你知道为什么会这样吗？位置（）有点奇怪。左边和外侧（）？ 非常感谢您的反馈

(function($) {
$.fn.spasticNav = function(options) {
    options = $.extend({
        speed: 500,
        reset: 1500,
        color: '#F29400',
        easing: 'easeOutExpo'
    }, options);

    return this.each(function() {

        var nav = $(this),
                currentPageItem = $('#active', nav),
                stroke,
                reset;

        $('<li id="stroke"></li>').css({
            width: currentPageItem.outerWidth(),
            height: 4,
            margin: 0,
            left: currentPageItem.position().left,
            top: currentPageItem.position().top,
            backgroundColor: options.color
        }).appendTo(this);
        stroke = $('#stroke', nav);

        $('a:not(#stroke)', nav).hover(function() {
                    // mouse over
                    clearTimeout(reset);
                    stroke.animate(
                            {
                                left : $(this).position().left,
                                width : $(this).width()

                            },
                            {
                                duration : options.speed,
                                easing : options.easing,
                                queue : false
                            }
                    );

                }, function() {
                    // mouse out
                    reset = setTimeout(function() {
                        stroke.animate({
                            width : currentPageItem.outerWidth(),
                            left : currentPageItem.position().left
                        }, options.speed)
                    }, options.reset);

                });
    });
};
})(jQuery); 

（函数（$）{
$.fn.spasticNav=函数（选项）{
选项=$。扩展({
速度:500,，
重置：1500，
颜色：“#F29400”，
放松：“easeOutExpo”
}，选项）；
返回此值。每个（函数（）{
var nav=$（此），
currentPageItem=$（'活动'，导航），
(打、击等的)一下
复位；
$（'
）.css({
宽度：currentPageItem.outerWidth（），
身高：4，
保证金：0，
左：currentPageItem.position（）.left，
top:currentPageItem.position（）.top，
背景颜色：options.color
}).附于（本）；
行程=$（'行程'，导航）；
$（'a:not（#stroke）'），导航）。悬停（函数（）{
//滑过
清除超时（重置）；
动画(
{
左：$（this）.position（）.left，
宽度：$（this）.width（）
},
{
持续时间：options.speed，
放松：选择。放松，
队列：false
}
);
}，函数（）{
//耗竭
重置=设置超时（函数（）{
动画({
宽度：currentPageItem.outerWidth（），
左：currentPageItem.position（）.左
}，选项。速度）
}，选项。重置）；
});
});
};
})（jQuery）；

我也有同样的问题。尝试使用jquery技巧：

$(document).ready(function(){ bla bla bla });

或者，如果您愿意：

$(window).load(function(){ bla bla bla });

在调用lava菜单主java脚本的函数之前添加以下内容，如下所示：

$(window).load(function(){$('#topmenu_ul').spasticNav();});

我也有同样的问题

问题是由于浏览器加载字体的确切时间：

IE将在遇到@font-face声明时立即下载.eot文件

Gecko（Firefox）、Webkit和Opera都会等到遇到HTML时再使用fontstack（包括@font-face字体）匹配>CSS规则

我假设您在CSS body语句中有字体面声明，并将其应用于整个页面，在jQuery（document）.ready（）事件中有lavaLamp语句，如下所示：

jQuery(document).ready(function() {
   jQuery('.ha-main-menu ul').lavaLamp({startItem: 3});
});

document.onreadystatechange = function () {  
    if (document.readyState == "complete") {  
        jQuery('.ha-main-menu ul').lavaLamp({startItem: 3});
    }
}

因此，在创建lavaLamp插件时，body css仍然没有应用，并且关于大小定位的计算是错误的，它们在应用字体之前引用了旧字体

正如您在这个问题中所看到的，一种解决方案是在事件onreadystatechange中调用lavaLamp，等待document.readystate==='complete'，方法如下：

jQuery(document).ready(function() {
   jQuery('.ha-main-menu ul').lavaLamp({startItem: 3});
});

document.onreadystatechange = function () {  
    if (document.readyState == "complete") {  
        jQuery('.ha-main-menu ul').lavaLamp({startItem: 3});
    }
}

---

因此，lavaLamp是在加载字体后启动的，因此lavaLamp插件中使用的大小-位置方法将是正确的。

我自己发现了奇怪效果的原因：它实际上与@font-face有关。宽度有时取自默认字体，而不是新字体。这就是为什么导航顶部的栏有时太宽并且位置错误的原因。我还在寻找一个真正的解决办法。