滚动上的多个动画答案

【问题标题】：Multiple animations on scroll滚动上的多个动画
【发布时间】：2014-08-10 18:37:50
【问题描述】：

我正在尝试让我的网站上的进度条在滚动时显示动画。所以我设法让进度条在滚动时设置动画。我现在的问题是我有多个进度条来制作动画（危险、警告、成功）等。我必须创建新元素吗？这是小提琴：http://jsfiddle.net/as2gv/11/

    // Check if elem is in viewport
 function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
   var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
 }

// Check if it's time to start the animation.
function checkAnimation(elem) {
  var $elem = $(elem);
  if ($elem.hasClass('start')) return;
  if (isElementInViewport($elem)) {
  $elem.addClass('start');

  //animated progess bars
  var bar = $('.progress-bar-warning');
  $(function () {
      $(bar).each(function () {
          bar_width = $(this).attr('aria-valuenow');
          $(this).width(bar_width + '%');

          });
      });


  }
}


// Capture scroll events
 $(window).scroll(function () {
 checkAnimation($('.progress-bar'));
 });

你们知道如何让所有进度条在滚动时动画吗？

【问题讨论】：

标签： javascript jquery animation jquery-animate

【解决方案1】：

对您的功能进行了一些修复，我们开始吧：DEMO

  // Check if elem is in viewport
  function isElementInViewport(elem) {
      var $elem = elem;

      // Get the scroll position of the page.
      var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
      var viewportTop = $(scrollElem).scrollTop();
      var viewportBottom = viewportTop + $(window).height();

      // Get the position of the element on the page.
      var elemTop = Math.round($elem.offset().top);
      var elemBottom = elemTop + $elem.height();

      return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
  }

  // Check if it's time to start the animation.
  function checkAnimation(elem) {
      var $elem = elem;
      if ($elem.hasClass('start')) return;
      if (isElementInViewport($elem)) {
          $elem.addClass('start');

          //animated progess bars
                  bar_width = $elem.attr('aria-valuenow');
                  $elem.css('width',bar_width + '%');
      }
  }


  // Capture scroll events
  $(window).scroll(function () {
      $('.progress-bar').each(function(){
          checkAnimation($(this));
      });
  });

【讨论】：