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

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/