实时显示高度变化

I just wrote a script that returns a div's height compared to it's parent into percentage.

我刚写了一个脚本，它将div的高度与其父级相比返回百分比。

I just need to find a way to display that height change in real time while animating the change.

我只需要找到一种方法来实时显示高度变化，同时为变化设置动画。

This is what I have so far: jsFiddle

这就是我到目前为止：jsFiddle

JS:

JS：

var full = $('#wrap').height();
var value = $('#bla').height();
var percentage = value*100/full ;

$('h1').html( percentage + '%');

$('#bla').delay(1500).animate({
    height: '74%'
},2200, "easeOutElastic");

2 个解决方案

#1

see this fiddle

看到这个小提琴

you can set an interval which looks for the height of the div and update the text accordingly

您可以设置一个查找div高度的间隔，并相应地更新文本

var inter=setInterval(function(){
    var full = $('#wrap').height();
    var value = $('#bla').height();
    var percentage = value*100/full ;
    $('h1').html( percentage + '%');
},10)

#2

Try using $('#bla').innerHeight(); You can get changing height of the div including padding also.

尝试使用$（'＃bla'）。innerHeight（）;你也可以改变div的高度，包括填充。

#1