填充时的jQuery动画div

Question

Here is a very simple example of what I have: http://jsfiddle.net/MxKLU/

Click on the links space-one and space-two and the contents within the div space will change. This will cause a jaring seen by the red background, when the contents gets larger and smaller than its predecessor. I am looking for a way to animate the height of the div space so that this jaring does not occur. Any help would be greatly appreciated.

Answer 1

Hope it helps you.

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

Demo: http://jsfiddle.net/MxKLU/2/

Answer 2

My proposition: http://jsfiddle.net/dxvEr/3/

it does not need to change height to 0 in the middle of the process.

I've added another div. Outer div has overflow:hidden and static height so it wouln't react to change in its content, but we check inner div height and use animation to set outer div to the same height.

Answer 3

I'd do it like this

$("#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 -> http://jsfiddle.net/MxKLU/5/