Fluid span width in div

Question

Hello to this great community,

I have the following lines of Code for an expanding span:

CSS

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

SCRIPT

$(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>

The span expands automatic to the width which is set, e.g. 90% of the spacer. If I change the Browserwindow width after that, the spacer follows fine but the span keeps its width. How is possible expand the span to 90% and then make it fluid to the spacer width?

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

Answer 2

Your span calculation is applying thw width for span in pixels :- You can do this :-

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

DEMO