如何获得一个进度元素，它被设置为在窗口调整大小时调整大小

How do I get a progress element that was animated to resize on window resize?

本文关键字：调整 设置 窗口 小时 何获得 一个 元素      更新时间：2023-09-26

我正试图让包装器（meter）div中的动画进度跨度像其他元素一样在窗口动画化后重新调整大小。看看这个小提琴-如果你把窗口调整得更小，.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);
});

您遇到的问题是JS会将其转换为计算的宽度，而不是CSS中设置的百分比。你可以写一些调整窗口大小的东西，但这可能会使它过于复杂

相反，您可以在.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/

相关文章：