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。

播放动画时删除边框

1 个答案: