Question

I’ve a slight problem with jQuery animation. First I’ll provide my code:

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

This code makes a filling ‘meter’ for certain stats in a game of mine, this one specifically for a user’s experience. I wanted to add a nice animation feature that would fill the meter from its current width to another width. I’ve done this successfully.

My Problem:

I need to adjust #xp_bar_filler, which contains another <div> that holds the text (displaying their experience in the bar). When I animate the meter to fill, it also sets the text <div> (#xp_bar_text) to the specified width. #xp_bar_text needs to be at width 100% at all times during animation, with only #xp_bar_filler changing width. Can anyone advise as to what to do here? I am using a simple animate(width:100%) for testing.

Answer 1

Add overflow:visible !important; to #xp_bar_filler

example: http://jsfiddle.net/niklasvh/RtkQv/