0

我的熔岩灯导航遇到了一个奇怪的问题。它是根据 Jeffrey Way 的熔岩灯教程改编的。熔岩灯的代码在底部。问题主要出现在 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);
4

2 回答 2

1

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

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

或者，如果您愿意：

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

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

$(window).load(function(){$('#topmenu_ul').spasticNav();});
于 2011-11-03T23:57:30.310 回答
1

我遇到过同样的问题。

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

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

Gecko（所以，Firefox）、Webkit 和 Opera 都等到遇到与 >CSS 规则匹配的 HTML 和包含 @font-face 字体的字体堆栈。

我想你在 CSS body 语句中有 font-face 声明，将它应用到整个页面，并且你在 jQuery(document).ready() 事件中有你的 lavaLamp 语句，顺便说一下：

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

所以，在创建 lavaLamp 插件时，仍然没有应用 body css，并且关于 size-positioning 的计算是错误的，它们在应用 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 是在字体加载后启动的，所以 lavaLamp 插件内部使用的 size-position 方法将是正确的。

于 2012-02-13T10:29:56.517 回答