Question

I have a div that needs to be set at a specific pixel height, say 100px, and then when a “show more” div is clicked, up that div up to 100% of its natural height. The trick is to make it happen SMOOTHLY.

I can animate it smoothly if I go from one fixed height, say 100px, to another fixed height, say 200px, but that doesn’t work for me.

Is there a way to open a div at a specific height and have it animate (slide down) smoothly to a percentage?

Here’s the jFiddle: http://jsfiddle.net/EvikJames/3pCSg/2/

<div class="Model">
    Some info. Some info. Some info.
    Some info. Some info. Some info.
    Some info. Some info. Some info.
</div>
<div class="ShowMore ">show more</div>

.Model {
    width: 100px;
    background-color: yellow;
    overflow: hidden;
  }
   .ShowMore {
    text-decoration: underline;
}

$(".Model").each(function() {
    $(this).css("height", "50px");
});

$(".ShowMore").click(function() {
    // this works smoothly
    // $(this).prev().css("height", "100px");
});
$(".ShowMore").click(function() {
    $(this).prev().animate({height: "100%"}, 3000);
});

Answer 1

You can grab the height of the element before setting it and animating to that:

var m = $(".Model").height();

...

$(".ShowMore").click(function() {
    $(this).prev().animate({
        height: m + "px"
    }, 3000);
});

http://jsfiddle.net/MzWGz/