Как анимировать * независимо * несколько разделов индикаторов выполнения в Bootstrap?

Question

У меня есть некоторый код Bootstrap, который отлично работает для анимации раздела индикаторов выполнения, когда он просматривается пользователем.

Однако он анимирует все индикаторы выполнения на странице, а не анимирует только индикаторы выполнения в этом просмотренном разделе. В результате, когда пользователь переходит к другому разделу индикаторов выполнения, они уже анимированы, и он не видит никакой анимации.

У меня такой вопрос: как изменить код ниже, чтобы анимировать независимо различные разделы по мере их просмотра?

CSS

#skills {
  padding: 60px 0;
}

#skills .progress {
  height: 35px;
  margin-bottom: 10px;
}

#skills .progress .skill {
  font-family: "Open Sans", sans-serif;
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}

#skills .progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

#skills .progress-bar {
  width: 1px;
  text-align: left;
  transition: .9s;
}

JS

// Skills section
$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

HTML

<!-- The first section of progress bars somewhere in the page -->
<section id="skills">
  <div class="skills-content">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
      </div>
    </div>
  </div>
</div>

<!-- Another section of progress bars further down the page -->
<section id="skills">
  <div class="skills-content">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
      </div>
    </div>
  </div>
</div>

Answer 1

когда ваша функция путевой точки вызвала у вас все ваши элементы прогресса, а не только дочерние элементы прогресса

$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() { // <- you are getting all progress elements
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

меняется на

$('#skills').waypoint(function() {
  $(this).children('.progress .progress-bar').each(function() { // <- make sure getting only children elements
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

Answer 2

Это должно работать, если вы используете разные классы в своем HTML, а затем в JS инициируете разные классы один за другим, когда это необходимо

    <div class="progress">
      <div class="progress-bar progress-bar-1" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
      </div>
    </div>

$('#skills').waypoint(function() {
  $('.progress-bar.progress-bar-1').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );