流體跨度寬度（div）

Question

您好，這個偉大的社區，

我有以下幾行代碼可擴展范圍：

CSS

.spacer { 
   width:100%;
   position: relative;
   background-color: red;
}   
.spacer > span {
   display: inline-block;
   height: 20px;
   background-color: yellow;
}

腳本

$(function() {
        $(".spacer > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 2500);
        });
    });

HTML

<div class="spacer"><span style="width: 90%"></span></div>

跨度會自動擴展到設定的寬度，例如間隔物的90％。 如果在此之后更改Browserwindow的寬度，則間隔符會很好，但跨度將保持其寬度。 如何將跨度擴展到90％，然后使其流動到隔離物寬度？

這是jsFiddle的演示 。

Answer 1

您的跨度計算將跨度應用於像素的跨度：-您可以這樣做：-

.data("origWidth", "90%")

DEMO

Answer 2

$(function() {
    $(".spacer > span").each(function() {
        var w = this.style.width; 
        // get the width property defined as inline style

        $(this)
        .data("origWidth", w)
        .width(0)
        .animate({
             width: $(this).data("origWidth")
        }, 2500);
    });
});