[英]jQuery - Text is unseen while being animated
我正在嘗試創建一個根據某些輸入填充的動態儀表。 儀表上方有一個文本和一個分隔符,它們隨着儀表的變化而移動。 這幾乎可以完美地工作,我唯一無法弄清楚的是,在進行動畫處理時看不到分隔線和文本,並且在動畫結束時會突然彈出。 如何解決?
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;
}
只需添加overflow: visible !important;
至#meter
#meter{
height: 10px;
background-color: #48B0F7;
position: absolute;
bottom: 0;
overflow: visible !important;
}
您還應該對.meterGeneralStyling可見
.meterGeneralStyling{
position: relative;
overflow: visible !important;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.