Question

我正在用熔岩灯导航来解决一个奇怪的问题。它是在Jeffrey Way的熔岩灯tutorial之后改编的。熔岩灯的代码位于底部。问题主要出现在firefox中（我使用的是FF6），但在Chrome和Safari中也出现问题（但不是IE9）：菜单项上方的橙色线有时太长而且在加载页面时太多了。当我将鼠标悬停在项目上方时，它会居中于它上面，并从头开始保持原样。任何想法为什么会发生？与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;

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

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都会等到他们遇到与＆gt; 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之前，有关大小定位的计算是错误的，它们引用旧字体。

正如你在这个问题How to know when font-face has been applied中看到的，一个解决方案是在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方法将是正确的。

熔岩灯导航jQuery Firefox

2 个答案: