Question

您好，这个伟大的社区，

我有以下代码行来扩展范围：

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>

跨度自动扩展到设定的宽度，例如90％的垫片。如果我在此之后更改了Browserwindow宽度，则间隔符很好，但跨度保持其宽度。如何将跨度扩展到90％，然后使其流动到间隔宽度？

Here's a demo on 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);
    });
});

div中的流体跨度宽度

2 个答案: