jQuery - текст невидим во время анимации

Question

Я пытаюсь создать динамический счетчик, который заполняется в соответствии с некоторым вводом. Над метром есть текст и разделитель, которые движутся по мере изменения счетчика. Это работает почти идеально, единственное, что я не могу понять, состоит в том, что делитель и текст невидимы во время анимации, и вроде бы всплывают на конце анимации. Как это можно зафиксировать?

JSfiddle здесь;

HTML:

<div id="meterContainer" class="meterGeneralStyling"> 
    <div id="meter" class="meterGeneralStyling"> <span id="reachSpan">ddd</span><span id="testDivider"></span> 

    </div> 
</div> 
<button id="butt">move</button> 

JS:

$("#meter").css("width","15%"); //initial value 

function resizeReach(width){ 
      $("#meter").animate({ 
       width: ""+width+"%" 
      }, 1500); 
    } 

$("#butt").click(function(){ 

    resizeReach(Math.floor(Math.random() * 90) + 10); 
}); 

CSS:

.meterGeneralStyling{ 
    position: relative; 
} 

#row2{ 
    top: 30px; 
} 
#meterContainer{ 
    position: relative; 
    top: 100px; 
    height: 10px; 
    z-index: -2; 
    background-color: #abddff; 
    overflow: visible !important; 
} 
#meter{ 
    height: 10px; 
    background-color: #48B0F7; 
    position: absolute; 
    bottom: 0; 

} 

#reachSpan{ 
    position: absolute; 
    right: 0; 
    bottom: 10px; 

} 

#testDivider{ 
    z-index: 3; 
    position: absolute; 
    height: 30px; 
    border-left: 3px solid red; 
    right: 0; 
    bottom: 0px; 
} 

Answer 1

Просто добавьте overflow: visible !important; в #meter

#meter{ 
    height: 10px; 
    background-color: #48B0F7; 
    position: absolute; 
    bottom: 0; 
    overflow: visible !important; 
} 

Answer 2

Вы также должны быть открыты для .meterGeneralStyling

.meterGeneralStyling{ 
    position: relative; 
    overflow: visible !important; 
}