我希望进度条开始动画时，它被查看

i want the progress bar start animation when it is viewed

本文关键字：动画 开始 我希望      更新时间：2023-09-26

嘿，我有一个问题…当涉及到viewport ....时，我想开始progressbar progress与百分比文本和栏....演示在这里

$('.bar-percentage[data-percentage]').each(function () {
 var progress = $(this);
 var percentage = Math.ceil($(this).attr('data-percentage'));

$({countNum: 0}).animate({countNum: percentage}, {
duration: 3000,
easing:'swing',

step: function() {
  // What todo on every count
var pct = '';
if(percentage == 0){
  pct = Math.floor(this.countNum) + '%';
}else{
  pct = Math.floor(this.countNum) + "%";
}
progress.text(pct) && progress.siblings().children().css('width', pct);
    }
   });
 });
http://cssdeck.com/labs/percentage-bar

这对你来说是完整的功能，有了这段代码，你的进度条在第一次查看时开始动画，然后不再动画

    function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
$(document).scroll(function () {
  if(isScrolledIntoView('#bar-1') && !IsViewed){
$('.bar-percentage[data-percentage]').each(function () {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({countNum: 0}).animate({countNum: percentage}, {
    duration: 2000,
    easing:'linear',
    step: function() {
      // What todo on every count
    var pct = '';
    if(percentage == 0){
      pct = Math.floor(this.countNum) + '%';
    }else{
      pct = Math.floor(this.countNum+1) + '%';
    }
    progress.text(pct) && progress.siblings().children().css('width',pct);
    }
  });
});
    IsViewed = true;
  }
});
相关文章：