jquery - 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%，然后使其流动到垫片宽度？

Here's a demo on jsFiddle .

Answer 1

$(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);
    });
});