三行代码  ›  专栏  ›  技术社区  ›  moody1208

javascript滚动函数动画在视图端口中多次触发,而不是一次

  •  0
  • moody1208  · 技术社区  · 3 年前

    我把动画放在一起,当它滚动到视图中时,就会触发,但它会在每个滚动上触发,而不仅仅是一次。在我的本地版本中,添加$(window).off('scroll');会停止函数的多次触发,但会中断我单独运行的其他滚动动画。

    我不知道我错过了什么,所以有什么帮助会很好:)

    $(document).ready(function ($) {
    
      function animateStatsBarVertical() {
        $('.progress-vertical--container').each(function () {
    
          var elementPos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
    
          if ( elementPos < topOfWindow + $(window).height() - 30 ) {
    
            function statsBarVertical() {
    
              var stats = document.getElementById("stats");
              var percentage = document.getElementById("percentage");
              var height = 1;
              var id = setInterval(frame, 10);
              var results_percentage_verticle = '<?php the_field("results_percentage_verticle", $p); ?>';
    
                function frame() {
                  if (height >= results_percentage_verticle) {
                    clearInterval(id);
                  } else {
                    height++;
                    stats.style.height = height + '%';
                    percentage.innerHTML = height * 1 + '%';
                  }
                }
    
            }
    
            statsBarVertical();
    
          }
    
        });
      }
      animateStatsBarVertical();
      $(window).scroll(animateStatsBarVertical);
     
    
    
    });
    .progress-vertical--container {
      position: absolute;
      left: 15px;
      bottom: 200px;
      width: 100px;
      text-align: center;
    
    }
    
    .progress-vertical--container .stats-info {
      max-width: 85px;
      width: 100%;
      margin: 0 auto 10px;
    }
    
    .progress-vertical--container .info {
      font-size: 0.875em;
      font-family: "visby_round_cfmedium", sans-serif;
      font-weight: 700;
      color: green;
      text-transform: lowercase;
      text-align: center;
      width: 100%;
      line-height: 14px;
    }
    
    .progress-vertical--container .progress-vertical {
      width: 40px;
      height: 300px;
      background-color: grey;
      margin: 0 auto;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    
    #stats {
      width: 100%;
      height: 1%;
      text-align: center;
      line-height: 30px;
      color: red;
      background-color: #d04e7c;
    }
    
    #percentage {
      font-size: 2em;
      font-family: "visby_round_cfmedium", sans-serif;
      font-weight: 700;
      color: #ffffff;
      text-transform: lowercase;
      display: block;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <body style="background:red;height:2000px;position: relative;">
    
    
    
      <div class="progress-vertical--container">
        <!-- progress-vertical container : BEGIN -->
        <div class="stats-info">
          <div id="percentage"></div>
          <div class="info">This is a test</div>
        </div>
        <div class="progress-vertical">
          <div id="stats"></div>
        </div>
      </div>
      <!-- progress-vertical container : END -->
    
    
    
    </body>
    1 回复  |  直到 3 年前
        1
  •  0
  •   Nick Zuber    3 年前

    如果动画事件已触发或未触发,则只需添加一个要跟踪的字段。第一次启动后,将此字段设置为 true 别再开枪了。

    $(document).ready(function ($) {
    
      // Tracks if we're fired the event
      let fired = false;
    
      function animateStatsBarVertical() {
        $('.progress-vertical--container').each(function () {
    
          var elementPos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
    
          // Only true if the element is in view AND has not fired yet
          if ( elementPos < topOfWindow + $(window).height() - 30 && fired === false) {
            // We've fired, so set to true
            fired = true;
    
            function statsBarVertical() {
              var stats = document.getElementById("stats");
              var percentage = document.getElementById("percentage");
              var height = 1;
              var id = setInterval(frame, 10);
              var results_percentage_verticle = 100; // '<?php the_field("results_percentage_verticle", $p); ?>';
    
                function frame() {
                  if (height >= results_percentage_verticle) {
                    clearInterval(id);
                  } else {
                    height++;
                    stats.style.height = height + '%';
                    percentage.innerHTML = height * 1 + '%';
                  }
                }
    
            }
    
            statsBarVertical();
    
          }
    
        });
      }
      animateStatsBarVertical();
      $(window).scroll(animateStatsBarVertical);
     
    
    
    });
    .progress-vertical--container {
      position: absolute;
      left: 15px;
      bottom: 200px;
      width: 100px;
      text-align: center;
    
    }
    
    .progress-vertical--container .stats-info {
      max-width: 85px;
      width: 100%;
      margin: 0 auto 10px;
    }
    
    .progress-vertical--container .info {
      font-size: 0.875em;
      font-family: "visby_round_cfmedium", sans-serif;
      font-weight: 700;
      color: green;
      text-transform: lowercase;
      text-align: center;
      width: 100%;
      line-height: 14px;
    }
    
    .progress-vertical--container .progress-vertical {
      width: 40px;
      height: 300px;
      background-color: grey;
      margin: 0 auto;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    
    #stats {
      width: 100%;
      height: 1%;
      text-align: center;
      line-height: 30px;
      color: red;
      background-color: #d04e7c;
    }
    
    #percentage {
      font-size: 2em;
      font-family: "visby_round_cfmedium", sans-serif;
      font-weight: 700;
      color: #ffffff;
      text-transform: lowercase;
      display: block;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <body style="background:red;height:2000px;position: relative;">
    
    
    
      <div class="progress-vertical--container">
        <!-- progress-vertical container : BEGIN -->
        <div class="stats-info">
          <div id="percentage"></div>
          <div class="info">This is a test</div>
        </div>
        <div class="progress-vertical">
          <div id="stats"></div>
        </div>
      </div>
      <!-- progress-vertical container : END -->
    
    
    
    </body>