jQuery height of element.style

css, jquery

Solution

HTML:

<div style="width: 200px; height: 200px; background-color: blue;">
    <div class="bar2" style="min-height: 70px; width: 100px; background-color: red;">foo</div>
</div>

JS:

jQuery('.bar2').animate({'height':'58' + "%"}, 1500, function() {
    alert($(".bar2").css('height'))
});

Live example here - http://jsfiddle.net/ANbrq/1/

You can only get a different height when it's actually changed. If you're trying to get it right after you ask it to resize, you'll get the initial height.

Problem

How do I get height of DIV, that is set by jQuery? `$('.bar2').animate({'height':'58' + "%"},1500);` When I inspect elements in chrome I see that my DIV height is set to 58% `<div class="bar2" style="height: 58%; background-image: ......>` I have tried this: `var bar2 = $(".bar2").height(),` or `var bar2 = $(".bar2").css('height'),` but I always get my "min-height" which is 70px, not height that is set by jQuery

Original source