Question

我正在努力让我的网站上的进度条动画滚动。所以我设法得到一个进度条来滚动动画。我现在的问题是我有多个进度条来制作动画（危险，警告，成功）等。我是否必须创建新元素？这是小提琴：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'));
 });

你们是否知道如何让所有进度条在滚动上动画？

Answer 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));
      });
  });

滚动时有多个动画

1 个答案: