javascript - 使用 jQuery 为相对包装器宽度设置动画时元素消失

Question

当我为包含 absolute 元素的 relative 定位元素的 width 设置动画时，我遇到了一个奇怪的问题。动画运行时，内部元素消失。动画完成后，显示内部元素。

这是演示:

http://jsfiddle.net/R4Cj5/

当我删除父元素 position: relative 时，内部元素会在动画运行时显示，但我无法相对于父元素定位它。

Basically box with the % should be visible al the time

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

FIXED : I just added overflow: visible !important; to relative positioned element

工作示例:http://jsfiddle.net/R4Cj5/26/

Answer 1

我认为它可能是一个 jQuery 动画。我很想看到一个没有任何黑客攻击的有效解决方案，但现在这里是 something you might find useful ! :-)

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

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

在此用例场景中，您还可以从 .progressbar .percent 中删除/注释 top: -26px样式表。我还添加了 height: 20px; 到 .progressbar .percentage 的样式中，这样您就可以在滑动时看到 % 的变化。