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

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 上。这似乎很复杂，希望有一个更简单的解决方案。

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

ps需要在ie7+下工作

Answer 1

试试这个jsFiddle 示例：

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