html - css 向左扩展文本并保持容器宽度

Question

请看这个 fiddle - 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;
}