通过 JQuery .fadeIn、.fadeOut 调整页面大小看起来很糟糕

Question

我试图根据页面上单击的链接让不同的 div 元素淡入和淡出。它工作正常，但每当一个元素淡出而另一个元素同时淡入时，页面大小就会发生相当大的变化，并且看起来“有问题”。放置延迟基本上具有相同的效果，因为一旦一个淡出，页面的大小就会减小，然后另一个淡入的页面会增加。

我想尝试设置高度的 position:absolute 但我'我也希望拥有它，以便用户可以选择一次加载所有 div，并且它们会重叠。

我可以尝试其他看起来更平滑的动画，但我喜欢淡入淡出。

还有其他人有解决这个问题的经验吗？有没有办法延迟页面大小调整，哈哈？

Answer 1

我也遇到了同样的问题。我解决这个问题的方法是使用outerHeight() JQuery函数获取父div的当前高度，然后在子div上调用fadeOut函数之前将div的最小高度设置为当前高度。

HTML

<div id="mydiv1">
    <div id="mydiv2">
        <!-- Elements to faded in and out -->
    </div>
</div>

JQuery

var current_height = $('#mydiv1').outerHeight();
$("#mydiv1").css("min-height", current_height);

$('#mydiv2').fadeOut('slow', function()
{
    // Animation complete.
});

这是我知道的一个老问题，但我希望能帮助任何在这里找到方法的人。