Javascript 使用jQuery设置相对包装宽度动画时，元素将消失

我有一个奇怪的问题，当我为包含

绝对

元素的

相对

定位元素的

宽度设置动画时，会发生这个问题。动画运行时，内部元素消失。动画完成后，将显示内部元素

以下是演示：


当我移除父元素
position:relative
时，动画运行时会显示内部元素，但我无法将其相对于父元素进行定位

基本上，带有%的框应始终可见

有人知道这里发生了什么吗

修正：我刚刚添加了溢出：可见！重要的；相对
定位元素

工作示例：
我认为这可能是一个jQuery动画。我希望看到一个没有任何黑客攻击的工作解决方案，但现在是这样的！：-）

我基本上在动画中添加了另一个功能，完成后，它将动画90%悬停在进度条上方

complete: function() {
    $percent.animate({top: "-26px"})
}

在这个用例场景中，您还可以从样式表中的
.progressbar.percent
中删除/注释
顶部：-26px
。我还增加了高度：20px

到

.progressbar.percentage的样式中，这样您就可以在%的变化滑过时看到它。
您到底想要什么。你能再解释一下吗。因为你显示了小提琴可以正常工作。@pathaktejpal查看条上方带有%的小框，当条正在设置动画时，它不会显示（但应该显示），动画完成后，它会立即显示它将始终可见。使溢出：隐藏到相对父元素，并选中它一次。@redv表示它根本不可见