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指數的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; 
}