jquery - 一杯水显示进度CSS jQuery

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center。
                            
                        
                    
                
                                6年前关闭。
            
                    
我一直在开发应用程序，最近开始对其进行一些较大的更改。基本上，该应用程序使用户能够跟踪他们所喝的水，并将其应用于他们在注册时设定的目标。

其中一项功能是直观表示其当前进度，但是我无法弄清楚如何按照自己的方式进行。

我要一杯水，它会根据当前状态充满。 （如果用户拥有75％的目标，则玻璃填充为75％，等等）。

有任何想法吗？我已经一遍又一遍地抬头，但是没有运气。

由于近票：

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

现在应该已经足够清楚了，但是如果没有，请告诉我。

最佳答案

我按照您的描述做了一个小提琴。您应该能够看到发生了什么！

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

基本上，只需将div.water嵌套在div.glass内，将水定位到玻璃的底部，然后使用查询为它的高度设置动画！

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