温度计进度量误差

Question

无法理解为什么我的进度金额没有显示。目标金额很好，进度条很好。但是，与进度条顶部对齐的数量没有显示，也没有显示。

检查Chrome中的css，无法追踪我出错的地方。

CSS:
#thermometer .goal {
position: absolute;
right: 0;
top: 0;
}
#thermometer .amount {
border-top: 1px solid #006600;
color: black;
display: inline-block;
font-family: Trebuchet MS;
font-weight: bold;
padding: 0 75px 0 0;
}
#thermometer .progress .amount {
border-top: 1px solid #006600;
color: #006600;
left: 0;
padding: 0 0 0 75px;
position: relative;
z-index: 25;
}
#thermometer {
height: 500px;
margin-top:140px;
position: relative;
background-image: url("images/thermobg.png");
background-repeat:no-repeat;
background-position: center bottom;
}
#thermometer .track {
background: transparent none repeat scroll 0 0;
height: 480px;
left: 10px;
margin: 0 auto;
position: relative;
top: 10px;
width: 30px;
}
#thermometer .progress {
background: green none repeat scroll 0 0;
bottom: 0;
height: 0;
left: 5px;
margin-bottom: 0 !important;
position: absolute;
width: 50%;
z-index: 100;
}
#thermometer .goal {
position: absolute;
right: 0;
top: 0;
}
#thermometer .amount {
border-top: 1px solid #006600;
color: #000;
display: inline-block;
font-family: Arial, sans-serif;
font-weight: bold;
padding: 0 75px 0 0;
}
#thermometer .progress .amount {
border-top: 1px solid #006600;
color: #006600;
left: 0;
padding: 0 0 0 75px;
position: relative;
z-index: 200;
}


HTML:
<div id="thermometer">
<div class="track">
<div class="goal">
<div id="goalAmount" class="amount">1000</div>
</div>
<div class="progress">
<div id="progessAmount" class="amount" style="display: 
inline;">200</div>
</div>
</div>
</div>

JS:
function thermometer(goalAmount, progressAmount, animate) {
"use strict";
var $thermo = $("#thermometer"),
    $progress = $(".progress", $thermo),
    $goal = $(".goal", $thermo),
    percentageAmount;

goalAmount = goalAmount || parseFloat($goal.text()),
progressAmount = progressAmount || parseFloat($progress.text()),
percentageAmount = Math.min(Math.round(progressAmount / goalAmount * 
1000) / 10, 100); //make sure we have 1 decimal point

$goal.find(".amount").text();
$progress.find(".amount").text();

$progress.find(".amount").hide();
if (animate !== false) {
    $progress.animate({
        "height": percentageAmount + "%"
    }, 1200, function () {
        $(this).find(".amount").fadeIn(200);
    });
    } else {
    $progress.css({
        "height": percentageAmount + "%"
    });

这可能与javascript有关吗？但我只是一名前端设计师，所以不知道该找什么。