У меня небольшая проблема с анимацией 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%) для тестирования.