熔岩灯导航jQuery Firefox

我正在用熔岩灯导航来解决一个奇怪的问题。 它是在Jeffrey Way的熔岩灯教程之后改编的。 熔岩灯的代码位于底部。 问题主要出现在firefox中（我使用的是FF6），但在Chrome和Safari中也出现问题（但不是IE9）：菜单项上方的橙色线有时太长而且在加载页面时太多了。 当我将鼠标hover在物品上方时，它会居中于它上面，并从头开始保持原样。 任何想法为什么会发生？ 与position（）。left和outerWidth（）有点奇怪吗？ 反馈非常感谢！

(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; $('
').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); 

Answer 1

我遇到过同样的问题。 尝试使用jquery技巧：

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

或者如果你喜欢：

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

在您调用熔岩菜单的主java脚本的函数之前添加它，如下所示：

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

Answer 2

我遇到过同样的问题。

问题是由于浏览器加载font-face的确切时刻：

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

Gecko（所以，Firefox），Webkit和Opera都会等到它们遇到与CSS规则相匹配的HTML和包含@ 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’，顺便说一下：

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

所以，lavaLamp是在加载font-face之后启动的，因此lavaLamp插件中使用的size-position方法将是正确的。