Javascript 边界半径+；溢出：使用jQuery设置动画时隐藏

看看这个

橙色条用作进度条，圆圈下的值是进度条的高度

知道为什么

溢出：隐藏是否忽略了Being？如何解决此问题？显然，任何事情都不应该超出这个范围

还有更好的解决方案吗？
位置：绝对
和
溢出：隐藏
似乎无法很好地处理
显示：表格/表格单元格
。删除表格中的内容以使文本垂直居中，可以解决此问题。至少在Firefox中。
我认为这是浏览器的问题

这是CSS3版本

.progressBar {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ec6730;
    transition: height 1s;
}

.innerContainer:hover > .progressBar {
    height: 300px;
}


它不再闪烁，因为浏览器处理作业（不是js循环动画…）。但它仍然显示了动画完成的优势！！！这可能是浏览器的东西。。。可能是个bug…
这与jQuery或任何javascript无关。事实上，如果您删除所有javascript并在li:hover上使用css操作.progressBar的高度，您仍然会注意到错误

这似乎是一个浏览器问题，如下所述：

作为一种解决方法，请尝试向mask元素添加一个不易察觉的css转换：

.outerContainer {
    -webkit-transform: rotate(0.000001deg);
}

您只需更改
.outerContainer
类，它就可以正常工作了

.outerContainer {
    position: relative;
    display: block;
    height: 96px;
    width: 96px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;

  -webkit-border-radius: 50px;
          border-radius: 50px;
}

将level类放在outerContainer div内，并将level类内的跨度设置为相对位置。在JavaScript中，要计算级别，请除以10而不是100，以获得完美的圆形悬停效果

这是一本书

HTML

<div class="outerContainer">
    <div class="innerContainer">
        <p>Circle 3</p>
        <span class="progressBar"></span>
    </div>
    <div class="level"><span>75</span>
    </div>
</div>

JS

body {
    background: blue;
}

#circles {
    text-align: center;
    margin: 100px 0;
}

li {
    display: inline-block;
    margin: 0 10px;
    position: relative;
}

.outerContainer {
    position: relative;
    display: block;
    height: 96px;
    width: 96px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;

    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

p {
    color: #000;
    width: 96px;
    position: relative;
    z-index: 2;
}

.progressBar {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ec6730;
}

.level span{
    position:relative;
}

$(function() {
    $("#circles li").hover(function(){
        var thisElement = $(this);
        var level = $(this).find(".level").text();
        var elementHeight = $(this).find(".outerContainer").height();       
        level = (level/10)*elementHeight;

        $(thisElement).find(".progressBar").stop().animate({
            height: level
        }, 300);
    }, function() {
        var thisElement = $(this);

        $(".progressBar").stop().animate({
            height: 0
        }, 300);
    });
});

display:table
不适合CSS定位

您应该避免使用该选项，并找到其他方法使标签垂直居中

如果你的圆圈有一个已知的高度，就像你的代码显示的那样（
height:96px
ecc），那么只需使用一个固定的顶部位置作为
absolute
ly定位
元素：


请注意，您甚至不需要jQuery来实现这一点，只要使用CSS3就可以实现（除非您针对的是旧浏览器）
稍微修改一下您的小提琴

修改：
将
.outerContainer
css从
display:table
更改为
display:block
，并将
margin top:30px
添加到
p
css

检查这是否适用于您。
在Chrome上运行良好，但Firefox在填充时不考虑边框半径。。。你在使用哪种浏览器？在Chrome和Firefox中都进行了测试，两个浏览器上都存在漏洞。我在Firefox中对其进行了一些修改，它看起来像是
position:absolute
将进度条从容器中取出，以便
溢出：隐藏
。当我将其悬停（Mac上的Chrome）时，橙色框溢出一直闪烁。我认为这是Jquery动画的结果。。。