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

问题是您在内部内容中加载内部内容，因此在加载发生后没有内部内容。尝试使用：

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

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

});

想象一下，你有2个矩形A和B，其中B在A里面。如果你加载B所有的东西并将它交给A那么就没有B，但是只有A因为B没有B它，所以A也不会有B。我最近遇到了类似的问题，花了我几个小时来理解和解决它。如果这解决了您的问题，请告诉我！

Answer 2

感谢@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());

    });

使用jQuery .load（）时获取元素高度的问题

2 个答案: