jQueryを使用しているときの高さの取得に関する問題.load（）

Question

jQuery .load（）を介してページにコンテンツを読み込むスクリプトに問題があります。コンテンツは正しくロードされ、コンテンツのアニメーションは（隠されたクラスで行われますが）動作しますが、ロードする前にラッピングコンテナの高さを設定してから、そのコンテナの高さをアニメーションして、異なるコンテンツの高さ

実際に何が起こっているのかは、要素の実際の高さではなく、何らかの理由で高さが0に設定されていることです。奇妙なことに、これは最初のクリックでは機能しているようですが、他の部分ではブレークして高さを0に設定します。

以下のコードを参照してください（jsFiddleを作成しますが、.load（）その）：

HTML

<main id="content" class="content"> 
    <div id="content-inner" class="content-inner"> 
     <!-- Content --> 
    </div> 
</main> 

CSS

.content { 
    transition: .25s height; 
} 

.content-inner { 
    position: relative; 
    top: 0; 
    opacity: 1; 
    visibility: visible; 

    transition: .25s opacity, .25s top; 
} 

.hidden .content-inner { 
    top: -30px; 
    opacity: 0; 
    visibility: hidden; 

    transition: .25s opacity, .25s top, 0s visibility .25s; 
} 

のJavaScript（jQueryの）

var $mainContentOuter = $('#content'), 
    linkContent = '#content-inner', 
    $mainContentInner = $(linkContent); 


function loadMainContent(link) { 

    // Assign height as current height to prevent jumping 
    $mainContentOuter.height($mainContentInner.outerHeight()); 

    // Hide content 
    $mainContentOuter.addClass('hidden').delay(250).queue(function() { 

     // Load content 
     $mainContentOuter.load(link + ' ' + linkContent, function() { 

      // Animate the height difference when loaded 
      $mainContentOuter.height($mainContentInner.outerHeight()); 

     }); 

     // Dequeue for delay 
     $(this).dequeue(); 

    }).delay(250).queue(function() { 

     // Reveal content and reset height 
     $mainContentOuter.removeClass('hidden').css('height',''); 

     // Dequeue for delay 
     $(this).dequeue(); 
    }); 
} 

// Override behavior of navigational links 
$('.nav-main > li > a').click(function(e){ 
    var link = $(this).attr('href'); 

    //Pass link 
    loadMainContent(link); 

    e.preventDefault(); 
}); 

任意の助けを大幅に高く評価されるだろう。事前に

おかげで、 ロブ

Answer 1

@thanasisのおかげで、ここで何が起こっているのかが分かりました。

変数$mainContentInnerは元のオブジェクトへの参照をDOMに格納していました。一度ページの内容が読み込まれると、このオブジェクトは削除され、別のものに置き換えられました。

IDが同じでも、別のオブジェクトです。これを回避するために、変数を再定義して新しいオブジェクトを対象にしました。以下を参照してください：

// Load content 
    $mainContentOuter.load(link + ' ' + linkContent, function() { 

     // Redefine $mainContentInner to the new object 
     $mainContentInner = $(linkContent); 

     // Animate the height difference when loaded 
     $mainContentOuter.height($mainContentInner.outerHeight()); 

    }); 

Answer 2

問題はあなたが外側のコンテンツ内の内部コンテンツをロードすることであるので、負荷が行われた後、何のインナーコンテンツがありません。使用してみてください：

$mainContentOuter.load(link + ' ' + '#content', function() { 

    // Animate the height difference when loaded 
    $mainContentOuter.height($mainContentInner.outerHeight()); 

}); 

あなたはBがAの内部にある2つの長方形AとBを、持っているようにあなたはBが持っているすべてをロードし、それを与える場合は、何のBは存在しません、それを想像しますが、唯一の理由BはBを持っていなかったので、AはBもそれに含まれません。私は最近、同様の問題を抱えており、理解して解決するまでに数時間かかりました。これで問題が解決した場合はお知らせください。