实时显示身高变化

Question

我刚刚写了一个脚本，returns 将 div 的高度与其父级相比的高度转换为百分比。

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

这是我目前所拥有的： jsFiddle

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");

Answer 1

看到这个fiddle

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

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

Answer 2

尝试使用 $('#bla').innerHeight(); 您还可以更改 div 的高度，包括填充。

实时显示身高变化

Show height change in real time

jquery

css

real-time