Question

我想知道当你从顶部向下滚动1000px或者在屏幕上看到它时，我怎么能开始制作这个动画呢？

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

$(".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

您在页面加载时运行脚本而不是＆＃39; onscroll＆＃39;容器元素。在您的情况下可能是tags$iframe(src=(paste0(input$folder, input$report), height=300, width=600)，在我的情况下，我将其放在body中以用于演示目的。

另外，在你的css中设置scrollable-div，否则该条看起来好像是100％宽。

＆＃13;

width

＆＃13;

$(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+'%');
      }
  });
})

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

如何在向下滚动时启动动画？

2 个答案: