Question

以下是我所拥有的一个非常简单的示例：http://jsfiddle.net/MxKLU/

点击space-one和space-two链接，div space中的内容将发生变化。当内容变得比前一个更大和更小时，这将导致红色背景看到的跳跃。我正在寻找一种方法来设置div space的高度的动画，以便不会发生这种跳跃。任何帮助将不胜感激。

Answer 1

希望它对你有所帮助。

$('a[id^="space"]').click(function(){
      $('div#space div').hide();
      $('#space, #'+$(this).text()).slideDown();
 });

演示：http://jsfiddle.net/MxKLU/2/

Answer 2

我的主张： http://jsfiddle.net/dxvEr/3/

在过程中间不需要将高度更改为0。

我添加了另一个div。外部div有溢出：隐藏和静态高度所以它不会对其内容的变化作出反应，但是我们检查内部div高度并使用动画将外部div设置为相同的高度。

Answer 3

我会这样做

$("#space").css("height",$(".selected").height());

$('#space-one-appear').click(function(){
    $('#space-one').attr('class','selected');
    $('#space-two').attr('class','unselected');
    $("#space").animate({height:$(".selected").height()}, 500);
});

$('#space-two-appear').click(function(){
    $('#space-two').attr('class','selected');
    $('#space-one').attr('class','unselected');
    $("#space").animate({height:$(".selected").height()}, 500);
});

jsfiddle - ＆gt; http://jsfiddle.net/MxKLU/5/

填充时jQuery动画div

3 个答案: