jQuery：動畫米

Question

我有一個jQuery動畫的輕微問題。首先，我將提供我的代碼：

<div id="xp_container"> 
    <div id="xp_bar_container"> 
    <div id="xp_bar_filler" style="width:0%;"> 
     <div id="xp_bar_text"> 
     <div id="user_xp">XP: 0/100</div> 
     </div> 
    </div> 
    </div> 
    <div id="user_level"> 
    Level 1 
    </div> 
    <br style="clear:both;"> 
</div> 

//CSS 

#xp_container 
{ 
    position:absolute; 
    bottom:3px; 
    right:5px; 
    color:#FFFFFF; 
    font-weight:bold; 
    font-size:14px; 
} 

#xp_bar_container 
{ 
    float:right; 
    border:1px solid black; 
    height:18px; 
    width:200px; 
    background:black; 
    text-align:left; 
} 

#xp_bar_filler 
{ 
    background:green url('images/meter_fill.png'); 
    height:18px; 
} 

#xp_bar_text 
{ 
    width:200px; 
    height:18px; 
    font-size:11px; 
    font-weight:bold; 
    color:white; 
} 

#user_xp 
{ 
    position:relative; 
    top:1px; 
    left:10px; 
} 

#user_level 
{ 
    float:right; 
    margin-right:15px; 
} 

此代碼對某些統計填充「米」在我的比賽，這一次專門爲用戶的體驗。我想添加一個很好的動畫功能，可以將電平表從當前寬度填充到另一個寬度。我已經成功完成了。

我的問題：

我需要調整#xp_bar_filler，其中包含另一個<div>保存文本（在酒吧裏展示他們的經驗）。當我爲儀表設置動畫時，它還會將文字<div> (#xp_bar_text)設置爲指定的寬度。 #xp_bar_text需要在動畫期間始終在寬度100%，只有#xp_bar_filler變化寬度。任何人都可以建議在這裏做什麼？我正在使用簡單的animate(width:100%)進行測試。

Answer 1

添加overflow:visible !important;到#xp_bar_filler

例如：http://jsfiddle.net/niklasvh/RtkQv/

Answer 2

你有沒有考慮使用jQuery UI？ Theres一個不錯的插件叫做progressbar，它符合你的需求。看看這裏：http://jqueryui.com/demos/progressbar/#animated