播放動畫時刪除了邊框

Question

我的下面的代碼工作正常，只不過在動畫開始時#progressBarThumb的邊框消失並重新出現在動畫結尾！

#progressBarContainer { 
    background-color: #e2e2e2; 
    height: 20px; 
    width: 550px; 
    position: absolute; 
    bottom: 9px; 
    right: 10px; 
} 
#progressBar { 
    height:20px; 
    background-color: #f12506; 
    width:0%; 
} 
#progressBarThumb { 
    float: right; 
    background-color: #FFF; 
    padding: 5px; 
    color: #f12506; 
    border-width:2px; 
    border-style:solid; 
    border-color:#f12506; 
    border-radius: 30px; 
    margin-top: -6px; 
    margin-right: -10px; 
    width:32px; 
    height:32px; 
} 

<div id="progressBarContainer"> 
    <div id="progressBar"> 
     <div id="progressBarThumb"></div> 
    </div> 
</div> 

this.setProgressBar = function(value, maxValue) { 
    var porcentage = (value /maxValue)*100 + '%'; 
    $('#progressBar').animate({'width':porcentage}); 
}; 

https://jsfiddle.net/x7n6d2ny/

關於如何解決此問題的任何想法？

Answer 1

問題是因爲默認情況下animate()方法在受影響的元素上設置overflow: hidden。你需要重寫，在CSS：

#progressBar { 
    overflow: visible !important; 
    /* other styles here... */ 
} 

Updated example

還要注意的是，你不包括jQuery的你的小提琴是不起作用。