一杯水显示进度CSS JQuery

Question

我一直在研究一个应用程序,最近开始对它进行一些非常大的改动.基本上,该应用程序使用户能够跟踪他们饮用的水并将其应用于他们在注册时设定的目标.

其中一个功能是对他们当前进展的视觉代表,但我无法弄清楚如何按照我想要的方式去做.

我想要一杯水,根据当前状态填满.(如果用户有75%的目标,玻璃填充到75%等).

有任何想法吗？我一遍又一遍地看着它,但没有运气.

由于关闭投票:

问题 - >我如何使用一杯水作为进度条？

现在应该很清楚,但如果没有......请告诉我.

Answer 1

这是我完成你所描述的小提琴.你应该能够看到发生了什么!

http://jsfiddle.net/mike_marcacci/XztTN/

基本上,只需在div.glass中嵌入div.water,将水定位到玻璃底部,并通过查询设置其高度的动画!

$(function(){
    $('.water').animate({
        height: '75%'
    }, 1000)
})