0

私は溶岩ランプのナビゲーションで奇妙な問題を経験しています。これは、JeffreyWayのLavaランプチュートリアルの後に適応されています。溶岩ランプのコードは下部にあります。問題は主に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 はすべて、@font-face フォントを含むフォントスタックを含む >CSS ルールに一致する HTML に遭遇するまで待機します。

CSS body ステートメントに font-face 宣言があり、それをページ全体に適用し、jQuery(document).ready() イベントに lavaLamp ステートメントがあるとします。

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

そのため、lavaLamp プラグインが作成されたとき、ボディ CSS はまだ適用されておらず、サイズ位置に関する計算が間違っています。font-face が適用される前に、古いフォントを参照しています。

この質問How to know when font-face has been appliedでわかるように、1 つの解決策は、イベント 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 に答える