在播放动画之前等待元素出现在视图中

Question

我有一些适用于加载栏的 Jquery，但我希望加载栏在视图内之前不要填​​充，有没有办法做到这一点？下面是控制加载栏的 Jquery，如果您需要当前加载栏的 CSS、HTML 或 jsfiddle 示例，请告诉我。任何帮助是极大的赞赏！

  $('.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:'swing',
    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);
    }
  });
});

Answer 1

我之前写了一个similar code for counters 并根据需要更改它，这是每个元素在屏幕上出现时开始动画的代码：

function isElementVisible($elementToBeChecked)
{
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    var TopElement = $elementToBeChecked.offset().top;
    var BotElement = TopElement + $elementToBeChecked.height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
}

$(window).scroll(function () {
    $( ".bar" ).each(function() {
        $this = $(this);
        isOnView = isElementVisible($(this));
        if(isOnView && !$(this).hasClass('Starting')){
            $(this).addClass('Starting');
            startAnimation($(this));
        }
    });
});

function startAnimation($this) {
  $this.animate({
    width: "100%"
  }, 3000, function() {
    // Animation complete.
  });
}

isElementVisible函数帮助判断每次滚动后屏幕上是否出现一个控件。

然后在每次滚动时调用此函数，并且如果显示屏上出现 .bar 元素，则使用 startAnimation 函数仅为此元素启动动画。

!$(this).hasClass('Starting') 被添加到代码中以防止不必要的调用函数，当动画第一次开始时，Starting 类被添加到元素中并在下次跳过。

见效： >>> JSFiddle