Javascript滚动功能–在视图端口中动画多次触发,而不是一次

时间:2018-07-13 13:55:02

标签: javascript jquery animation scroll

我合成的动画会在滚动到视图时触发,但它会在每个滚动上触发,而不仅仅是一次。在我的本地版本中添加$(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 个答案:

答案 0 :(得分:0)

您只需添加一个字段即可跟踪动画事件是否触发。首次触发后,请将此字段设置为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>