2

問題は、新しいページが読み込まれたときにメニューがジャンプすることです（選択したメニュー項目は完全に中央に配置されている必要があります。メニューは次のコードを使用します。

$(document).ready(function(){

    /* Menu klik animatie II */
    $("nav#menu a").click(function(e) {
        e.preventDefault();
        var dit = $(this);
        $(this).parent().siblings().removeClass("current_page_item");
        $(this).parent().addClass("current_page_item");
        geselecteerd = $('#menu li.current_page_item').sumOuterWidth(true);
        voor = $('#menu li.current_page_item').prevAll().sumOuterWidth(true);
        vader = $('#menu').parent().width();
        invoegen = parseInt(((vader-geselecteerd)/2)-voor);
        $('nav#menu').prev().animate({
            width: invoegen + 'px',
        }, {
            duration: 400,
            specialEasing: {
                width: 'linear',
                height: 'easeOutBounce'
        },
        complete: function() {
            $('#content').fadeTo('fast', 0.01, function() {
                document.location = $(dit).attr('href');
            });
        }
      });
    });

    /* Menu uitlijning: geselecteerde item centraal */
    $.fn.sumOuterWidth = function(useMargins) {
      var sum = 0;
      this.each(function() { 
        sum += $(this).outerWidth(useMargins);
      });
      return sum;
    };

    geselecteerd = $('#menu li.current_page_item').sumOuterWidth(true);
    voor = $('#menu li.current_page_item').prevAll().sumOuterWidth(true);
    vader = $('#menu').parent().width();
    invoegen = parseInt(((vader-geselecteerd)/2)-voor);
    $('#menu').before("<div style='width:" + invoegen + "px;float:left'>&nbsp;</div>");
});

自分が何を間違えたのか本当に考えられません。幅（メニューの前のdivから）は、アニメーション化されたもの（新しいページがロードされる前）と新しくロードされたページで同じである必要があります。誰かこれについてのアイデアはありますか？

別のフォント（Varela Round-> Google Webフォント）を使用しても、それは起こりません。

4

1 に答える 1

0

このjQuery構文は、DOMの準備ができたときにコードを実行します。

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

場合によっては、コードを実行する前に、ページ全体（および画像の依存関係）をロードする必要があります。そのような場合、私たちは次のことを行います。

$(window).load(function() { //code })
于 2012-10-02T15:57:40.267 に答える