jquery - 播放动画时去除边框

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

另请注意，您的 fiddle 无法正常工作，因为您没有包含 jQuery。