我怎样才能让动画在向下滚动时开始？

Question

我想知道，当您从顶部向下滚动 1000 像素或在屏幕上看到它时，如何让这个动画开始？

我尝试了不同的方法并且零运气，它会在网站加载时自动启动。

$(".progress div").each(function() {
    var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr("data-values"),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
    if (nextValue == "0") {
        $(display).css("padding", "0");
    } else {
        $(display).css("color", "#fff").animate({
            "width": nextValue + "%"
        }, "slow");
    }
});

.progress-bar {
  background-color: #53dceb;
  height: 12px;
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div style="margin-bottom: 2rem">
    <h5 style="color: #666">test12 <span class="pull-right">50%</span></h5>
    <div class="progress">
        <div data-values="50" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
    </div>
</div>

Answer 1

您在页面加载时运行脚本，而不是容器元素的“onscroll”。在你的情况下，可能是body，在我的情况下，我把它放在scrollable-div 中用于演示目的。

另外，在你的 css 中设置 width，否则栏看起来好像是 100% 宽。

$(function(){
  var progressBar = $('.progress-bar'),
      display = $('#display'),
      initProgress = 0,
      targetProgress = parseInt(progressBar.attr("data-values"));
  
  $('#scrollable-div').on('scroll', function(){
    var currentValue = parseInt(display.text()),
        nextValue = targetProgress,
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
      if (nextValue == "0") {
        progressBar.css('width', '0%');
      } else {
        progressBar.css('width', nextValue+'%');
      }
  });
})

.progress-bar {
  background-color: #53dceb;
  height: 12px;
  width: 0%;
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}

<div id="scrollable-div" style="margin-bottom: 2rem; height: 150px; border: 1px solid #CCC; overflow: auto;">
    <h5 style="color: #666">test12 <span id="display" class="pull-right">50%</span></h5>
    <div class="progress">
      <div data-values="50" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
    </div>
    <div style="height: 500px;"><!-- push down to show scroll --></div>
  </div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Answer 2

这里已经解决了..How could I fix the animation speed?

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() { // this code is run everytime you scroll
  console.log('scrolling'); // scroll a little bit and see how many times this is logged - that is how many times you run the code below

  $(".progress div").each(function() {
    var display = $(this),
      currentValue = parseInt(display.text()),
      nextValue = $(this).attr("data-values"),
      diff = nextValue - currentValue,
      step = (0 < diff ? 1 : -1);

    if (!display.is(':animated')) { // this checks to see if you are currently animating - if you are, you do not want to start the animation again (otherwise you get that slow start you were seeing)
      if (nextValue == "0") {
        $(display).css("padding", "0");
      } else {
        $(display).css("color", "#fff").animate({
          "width": nextValue + "%"
        }, "fast");
      }
    }

  });
});