Question

我试图在某个位置后为数字设置动画，但问题是它一遍又一遍地循环这个条件

我的JS

 var target = $("#team").offset().top-$(window).height();
 $(document).scroll(function() {
  if ($(window).scrollTop() > target) {
   $('#lines').animateNumber({ number: 165 },500);
  }
 });

我的HTML

  <div id="team"></div>
  <div class="col-lg-3">
      <h3 id="lines">0</h3>
  </div>

我想第一次运行该语句，那就是它的

Answer 1

您可以使用布尔变量来决定代码是否已经执行：

var target = $("#team").offset().top-$(window).height();

//declare decision variable to false
var hasanimatenum=false;

$(document).scroll(function() {
 if ($(window).scrollTop() > target && !hasanimatenum) {//also check that decision variable is false
   $('#lines').animateNumber({ number: 165 },500);
   hasanimatenum=true;//set decision variable to true
 }
});

Answer 2

你想要这样的东西 - 当满足条件时删除事件处理程序

    var target = $("#team").offset().top-$(window).height();
    $(document).on('scroll', function() {
        if ($(window).scrollTop() > target) {
            $('#lines').animateNumber({ number: 165 },500);
            $(this).off('scroll');
        }
     });

如何使用if语句jquery为数字设置动画

2 个答案: