jquery - 如何在更改内容时保持 div 高度固定？

Question

<div id='wrapT'>some stuff here</div>
<div id='btnsT'>
<img id='prev' src='btns/prev_01.png' alt='prev'>
<img id='next' src='btns/next_01.png' alt='next'>
</div>

js

    $('#btnsT #next').click(function(){
    var a = $('#divsT > div').eq(xdiv).html();
    $('#wrapT').html(a);
});

#wrapT 正确地更改了它的内容，但是它首先将它的 height 更改为 0 几秒钟，然后恢复到原来的高度.

如何在这个过程中保持高度固定？

重要提示:新旧内容的高度均为 450 像素。

我在 CSS 中试过:

#wrapT{
    height:450px;
}

但在这种情况下，在调整窗口大小时出现问题 - 它始终保持 450 像素。

还尝试在 btn click 事件中添加:

var x = $('#wrapT').height();
$('#wrapT').css('height', x + 'px');
$('#wrapT').html(a);
$("#wrapT").css('height', 'auto');

没有成功。 #wrapT 不断改变它的高度。

Answer 1

我以前做过类似的事情。您可以做的是用 visibility:hidden; 加载当前元素后面 的下一个元素，可能还有一个较小的 z-index。这意味着 wrapT 的形状将保持不变。

然后您可以执行以下操作:

$('#OldItem').fadeOut(400, function() {
   $(this).remove();
});
$('#NewItem').fadeIn(400)