Question

我有几个动画，当页面的一部分在视图中时运行。由于某种原因，每次运行另一个动画时都会重置百分比条填充的动画，从而导致每次重新填充百分比条。下面是百分比栏的代码，下面是在视图中运行的另一个动画的示例。我已经把它缩小到导致问题的JS，希望有人可以指出导致这个问题的原因。任何帮助表示赞赏！

百分比JS：

    /* BAR PERCENTAGE */
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-percentage" ).each(function() {
        $this = $(this);
        isOnView = isElementVisible($(this));
        if(isOnView && !$(this).hasClass('Starting')){
            $(this).addClass('Starting');
            startAnimation($(this));
        }
    });
});



function startAnimation($this) {
 $('.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);
    }
  });
});
}

其他动画示例：

$(window).scroll(function () {
    $( "#about-image-1" ).each(function() {
        $this = $(this);
        isOnView = isElementVisible($(this));
        if(isOnView && !$(this).hasClass('fadeIn')){
            $(this).addClass('fadeIn');
            startAnimation($(this));
        }
    });
});

JS重置事件

0 个答案: