熔岩灯导航jQuery Firefox [英] Lava Lamp navigation jQuery Firefox
问题描述
熔岩灯的代码在底部。问题主要出现在Firefox（我正在使用FF6），但在Chrome和Safari（但不是IE9）中也是偶尔出现的：在加载页面时，菜单项上方的橙色线有时太长而太多。当我将鼠标悬停在项目上方时，它将它置于其中并像从一开始就一样停留在那里。
任何想法，为什么发生这种情况？一些奇怪的位置（）。left和outerWidth（）？
反馈非常感谢！
$ $ p $ $ $ $ $ $ $ $ $ $ $ $ $ $。选项）{
options = $ .extend（{
speed：500，
reset：1500，
color：'＃F29400'，
easing：'easeOutExpo'
$ b 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（）{
//鼠标悬停在
上clearTimeout（reset）;
stroke.animate（
{
left：$（this）.position（）。left，
width：$（this）.width（）
$ b b
duration：options.speed，
easing：options.easing，
queue：false
}
）;
$ b}，function（）{
// mouse out
reset = setTimeout（function（）{
stroke.animate（{
width：currentPageItem .outerWidth（），
left：currentPageItem.position（）。left
}，options.speed）
}，options.reset）;
}）;
}）;
};
}）（jQuery）;
我有同样的问题。
问题是由于浏览器加载字体的确切时刻：
IE会在遇到@ font-face声明时立即下载.eot文件。
Gecko（so，Firefox），Webkit和Opera全部等到他们遇到的HTML匹配一个> CSS规则和一个包含@ font-face字体的fontstack。
我想你有在CSS body声明中使用font-face声明，并将其附加到整个页面，并且在jQuery（document）.ready（）事件中使用lavaLamp语句，如下所示：
jQuery（document）.ready（function（）{
jQuery（'。ha-main-menu ul'）。lavaLamp（{startItem：3}）;
}）;
所以，当lavaLamp插件创建时，body css仍然没有应用，定位是错误的，它们是指在应用font-face之前的旧字体。
正如你在这个问题中可以看到如何知道何时应用了font-face ，一种解决方案是在事件onreadystatechange中调用lavaLamp，等待document.readystate ==='complete'，方法如下： 所以，lavaLamp是在font-face所以在lavaLamp插件中使用的size-position方法将是正确的。 I'm experiancing a weird problem with my lava lamp navigation. It's adapted after Jeffrey Way's Lava lamp tutorial.
The code for the lava lamp is at the bottom. Problems appear mainly in firefox (I'm using FF6) but occationally also in Chrome and Safari (but not IE9): The orange line above the menu item sometimes is too long and too much to the right when a page is loaded. When I hover over the item then it centers over it and stays there like it should from the beginning.
Any ideas why that happens? Something weird with position().left and outerWidth()?
Feedback very appreciated!
I had the same issue. The problem is due to the exact moment in which the browser loads the font-face: IE will download the .eot file immediately when it encounters the @font-face declaration. Gecko (so, Firefox), Webkit, and Opera all wait until they encounter HTML that matches a >CSS rule with a fontstack including the @font-face font. I suppose you have the font-face declaration in CSS body statement, aplying it to the entire page, and you have your lavaLamp statement in the jQuery(document).ready() event, in the way: so, when lavaLamp plugin is created, body css is still not applied, and the calculations about size-positioning are wrong, they refer to old font, before font-face is applied. As you can see in this question How to know when font-face has been applied , one solution is to call lavaLamp in event onreadystatechange, waiting until the document.readystate === 'complete', in the way: so, lavaLamp is launched after the font-face is loaded, so the size-position methods used inside the lavaLamp plugin will be the correct ones. 这篇关于熔岩灯导航jQuery Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b $ pre $ document.onreadystatechange = function（）{
if（document.readyState ==complete）{
jQuery（'。ha-main-menu ul'）。lavaLamp（{startItem：3}）;
$ b (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);
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});
}
}
