Почему не работает jquery анимация в цикле?

Question

[YourKey]

Здравствуйте! Не могу разобраться, в чем причина, опыта нет, провозился весь день уже. Есть следующая структура опроса (кол-во вариантов может быть разным):

<div class="vote-res">
	<div class="poll-row">
		<strong>Ламинат4</strong>
		<span class="pull-right">43%</span>
		<div class="progress">
			<div id="bar4" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%"></div>
		</div>
	</div>
	<div class="poll-row">
		<strong>Ламинат2</strong>
		<span class="pull-right">21%</span>
		<div class="progress">
			<div id="bar2" class="progress-bar" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 21%"></div>
		</div>
	</div>
	<div class="poll-row">
		<strong>Ламинат3</strong>
		<span class="pull-right">21%</span>
		<div class="progress">
			<div id="bar3" class="progress-bar" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 21%"></div>
		</div>
	</div>
	<div class="poll-row">
	<strong>Ламинат</strong>
	<span class="pull-right">14%</span>
	<div class="progress">
		<div id="bar1" class="progress-bar" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%"></div>
	</div>
	</div>

	<p>Всего голосов: 14</p>
</div>

Jquery функция должна выполнять анимацию полоски (процент проголосовавших) при загрузке страницы. Процент берется из этого же кода в переменную percentage и потом блоку должна задаваться такая ширина. Однако у меня анимация работает только для первого элемента.

function animateResults(){
  $(".poll-row").each(function(){
      var percentage = $(this).children("span").text();
      console.log(percentage);
      $(this).children(".progress").children("div").css({width: "0%"}).animate({width: percentage}, 'slow');
  });
}

Помогите найти, пожалуйста, в чем может быть проблема?

Answer 1

[ThisIsEsh]

В функции loadResults(data) не выставляйте в стилях ширину для блоков progress-bar.

if (data[id][OPT_ID] !== votedID) {
      results_html = results_html + "<strong>"+data[id][OPT_TITLE]+"</strong><span class='pull-right'>"+percent+"%</span><div class='progress'><div id='bar"+data[id][OPT_ID]+"' class='progress-bar' role='progressbar' aria-valuenow='"+percent+"' aria-valuemin='0' aria-valuemax='100'></div></div>";
    } else {
results_html = results_html + "<strong>"+data[id][OPT_TITLE]+"</strong><span class='pull-right'>"+percent+"%</span><div class='progress'><div id='bar"+data[id][OPT_ID]+"' class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='"+percent+"' aria-valuemin='0' aria-valuemax='100'></div></div>";
    }

Выложил рабочий кусок.

Answer 2

[ThisIsEsh]

Скопировал ваш код и запустил, все работает, приведите полный листинг кода.

Comments

[YourKey]

Вот ссылка на яндекс диск yadi.sk/d/6rk0L4PMMb8Jg , скрипт работает с php, поэтому запускать только через денвер.