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吗？这是一个名为progressbar的好插件，可以满足您的需求。请在此处查看：http://jqueryui.com/demos/progressbar/#animated

jQuery：动画米

2 个答案: