0
嗨我試圖在進度條出現在視口上時爲其設置動畫。 它應該動畫的寬度和計數。 我使用animateProgressBar函數來設置寬度和數字的動畫效果，我在航點上調用它。我使用jquery每個在每個匹配元素上執行該函數。但它沒有關於同一元素的動畫
function animateProgressBar(){
var bar = $('.progress-bar');
var value = $('.progress-bar').find('.count');
bar.prop('Counter', 0).animate({
Counter: parseFloat(bar.attr('aria-valuenow'))
},
{
duration: 3000,
easing: 'swing',
step: function(now) {
var number = parseFloat(Math.round(now * 100)/100).toFixed(2);
bar.css({ 'width': number + '%' });
value.text(number + '%');
}
});
}
$('.progress-bar').each(function() {
var waypoint = new Waypoint({
element: this,
handler: function(direction) {
animateProgressBar();
}
})
});/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress span {
position: absolute;
display: block;
width: 100%;
color: black;
}
.progress .progress-bar {
transition: unset;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="count"></span>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis tortor auctor, mattis nulla vel, varius mauris. Maecenas cursus eleifend consequat. Fusce hendrerit dui quis ante iaculis sagittis. Aliquam vehicula quam sollicitudin vestibulum porttitor. Aliquam id quam auctor, ultrices elit eu, lacinia tortor. Phasellus in scelerisque mauris. Suspendisse rutrum at odio at sodales. Cras porta nisl sed justo volutpat, eu efficitur ante pharetra. Pellentesque congue turpis vitae lorem mattis, et molestie quam condimentum. Pellentesque imperdiet orci vitae tortor rutrum viverra. Suspendisse quis rhoncus orci. In vestibulum ac lacus sodales feugiat. Aliquam tempor vehicula urna in egestas.
Curabitur eget ultricies nisi, id consequat arcu. Nulla vitae finibus sem. Mauris bibendum justo non suscipit porttitor. Nulla vel egestas leo, ac hendrerit lacus. Curabitur consequat massa nec nisi cursus scelerisque. In hac habitasse platea dictumst. Aliquam ornare nibh vel lacus mattis efficitur. Nullam sit amet dui ut sapien auctor consectetur sit amet et urna. Morbi placerat eros sem. Phasellus non velit tempor mi pretium eleifend.
Curabitur auctor dui lorem, eu convallis massa facilisis dignissim. Sed sed mi ut nulla scelerisque cursus nec vel odio. Fusce et bibendum libero. Donec vehicula eleifend diam, eget auctor lorem gravida vel. Cras tincidunt ac ligula ut pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget eros at tellus ultrices feugiat in a massa. In fermentum non turpis in lacinia.
Fusce mauris lorem, fermentum vitae massa ut, convallis tristique purus. Quisque euismod auctor vulputate. Sed sodales a risus ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.
Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringilla, sed dictum turpis aliquam.
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="count"></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<span class="count"></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<span class="count"></span>
</div>
</div>