我有一些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>
</section>
<!-- 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>
</section>