我试着寻找一个解决方案，但不确定这个术语的确切名称。我正在寻找对MySQL数据库的jquery ajax调用，以确定一个数字(0-100%)，并将该数字用作百分比。使用该百分比生成百分比的实时指示(每1分钟检查一次)。
因此，想象一个空杯子的图像，每60秒执行一次对MySQL的调用，并从MySQL中检索百分比数字。这个数字将使背景图像从底部开始显示。每60秒，当这个数字从MySQL中变大时，就会显示更多的图像，直到杯子100%满。
我可以处理所有需要完成的MySQL查询和php，我只是不知道是否有这种风格的动画或插件的术语，或者我到底在寻找什么来根据MySQL 的返回值使图像每60秒"滚动"一次
我成功使用的东西：
<html>
<title></title>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
setInterval(function() {
var a = $('#inner').height();
$('#inner').animate({ height: a + 25 });
}, 3000);
</script>
</head>
<body>
<div id="outter">
<div id="inner" style="background-color:blue; height:0px"></div>
</div>
</body>
</html>
JS Fiddle
您可以使用clip属性：
var target = document.getElementById('target'),
h = target.clientHeight,
w = target.clientWidth;
setInterval(function(){
var v = h*(1-getPercentage()/100) | 0;
target.style.clip = 'rect('+v+'px,'+w+'px,'+h+'px,0)';
}, 100);
演示
最简单的方法-创建一个具有透明区域的图像，该区域代表实际的空玻璃。将它(或任何使用它作为背景的元素)放置在蓝色背景的DIV上。根据AJAX调用返回的数字，简单地控制后台DIV的高度。
我会使用jquery animate函数来增加彩色部分的高度，并使用setInterval函数每60秒调用一次(尽管需要注意的是，这对于确切的时间来说并不精确)。
类似于：
setInterval(function() {
$.post("url", function(data) {
$("#image").animate({"height": data + "px"});
}
}, 60000);
随着#图像高度的增加，放置在静态"玻璃"图像后面。
例如：
HTML:
<div id="image-container">
<div id="image"></div>
<img src="glass.png" />
</div>