Question

请看这个小提琴 - http://jsfiddle.net/grimmus/vawE9/4/

<div class="refresh">
        <div class="date" id="date">
            As of 1/10/2013 16:44 2013 (GMT + 1)
        </div>
        <div class="loading"id="loading">
            Loading...
        </div>
</div>

在蓝框中，我试图在日期和加载文本之间切换。日期文本可以是不同的宽度，我希望当隐藏文本并显示加载文本时，此宽度保持不变。必要时，日期的宽度应向左扩展。加载文本应始终左对齐

显示加载文本时，我很难保留框的宽度。我想到的一个解决方案是将隐藏的可见性应用于日期文本，然后将加载文本相对定位在具有更高z-index的div上。这似乎很复杂，希望有一个更容易的解决方案。

建议/建议/提示最受欢迎。

p.s需要在ie7 +

中工作

Answer 1

试试 jsFiddle example ：

<强>的jQuery

setInterval(function () {
    $('#date').animate({
        opacity: .01
    }, 0, function () {
        $('#loading').fadeIn(0).delay(2000).fadeOut(0, function () {
            $('#date').animate({
                opacity: 1
            }, 0)
        });
    })
}, 4000);

<强> CSS

body {
    margin:25px;
}
.container {
    background:#ccc;
    height:50px;
    width:100%;
}
.refresh {
    background:blue;
    color:#ccc;
    height:20px;
    float:right;
    margin-right:25px;
    min-width:150px;
    text-align:left;
    position:relative;
}
.date {
    position:relative;
}
.loading {
    display:none;
    position:absolute;
    top:0px;
}

css向左展开文本并保留容器宽度

1 个答案: