您好我尝试在视口上显示进度条时设置动画。 它应该为宽度和计数编号设置动画。 我使用animateProgressBar函数来设置宽度和数字的动画，我在航路点上调用它。我使用jquery来执行每个匹配元素上的该函数。但它失败了
ShortcutInfo.Builderfunction 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;
}
答案 0 :(得分：0)
检查此更新的代码。我已在elem函数中为每个元素发送了this animateProgressBar。
function animateProgressBar(elem){
var bar = $(elem);
var value = $(elem).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(index, elem) {
var waypoint = new Waypoint({
element: elem,
handler: function(direction) {
animateProgressBar(elem);
}
})
});/**
* 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>
s 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 fringils 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 fringils 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 fringil