Question

我正在尝试获取包装器（米）div内的动画进度范围，以便在已经设置动画后调整窗口大小时像其他元素一样调整大小。请参阅此fiddle - 如果您调整窗口大小，.meter > span保持不变，但所有其他元素都正在调整大小。当我添加window.resize函数时，它只是使动画变得怪异。

HTML：

<div class="skill">
    <div class="meter"> <span style="width: 98%"></span>

    </div>
    <div class="skillname">Painting</div>
</div>
<div class="skill">
    <div class="meter"> <span style="width: 96%"></span>

    </div>
    <div class="skillname">Drawing</div>
</div>
<div class="skill">
    <div class="meter"> <span style="width: 93%"></span>

    </div>
    <div class="skillname">Photography</div>
</div>
<div class="skill">
    <div class="meter"> <span style="width: 90%"></span>

    </div>
    <div class="skillname">Sculpture</div>
</div>

CSS：

.meter {
    height: 16px;
    width: 70%;
    display: inline-block;
    position: relative;
    background: #DCD9D6;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 1px;
    vertical-align:middle;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.5);
}
.meter > span {
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #2F474E;
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.skillname {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    vertical-align:middle;
    font-family:"Lato", sans-serif;
}

jQuery的：

$(".meter > span").each(function (i) {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
        width: $(this).delay(200 * i).data("origWidth")
    }, 800);
});

Answer 1

您遇到的问题是JS会将其转换为计算宽度，而不是CSS中设置的百分比。你可以用window-resize编写一些东西，但它可能会使它复杂化。

相反，你可以在你的.each（）循环之后重新设置宽度，使其回到％（不幸的是，这不是直接的）。你可以自己计算。您需要添加一个承诺，以确保它在动画后发生：

$(".meter > span").each(function(i) {
    $(this)
    .data("origWidth", $(this).width())
    .width(0)
    .animate({
      width: $(this).delay(200*i).data("origWidth") 
    }, 800); 
}).promise().done(function(){
    $(".meter > span").each(function() {
        $(this).width(Math.round(( 100 * parseFloat($(this).css('width')) /  parseFloat($(this).parent().css('width')) )) + '%');
    });
});

因此，我们只需将当前宽度除以父级的宽度乘以100，然后在末尾拍一个％符号。然后使用jQuery中的css属性将其添加到每个栏。似乎对我有用。

您可以在此处查看JSFiddle： https://jsfiddle.net/jeaku9k9/1/

如何在窗口调整大小时获得动画调整大小的进度元素？

1 个答案: