如何让动画开始向下滚动？

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

您在页面加载时运行脚本而不是容器元素的“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

这里已经解决了.. 我怎么能修复动画速度？

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