奇怪的 jQuery 动画行为 - 一遍又一遍地保持运行

Question

问题我正在从左到右对一些文本进行动画处理。它应该只运行一次并在它出现时完成（不应该运行直到它出现！），但出于某种原因，当它正确地等待它出现时，这是循环的一遍又一遍，慢慢地将元素推离页面。

如果您对我有任何关于如何阻止这种奇怪现象的见解，我将不胜感激！

这是一个网站示例，如果觉得有用，也可以查看。

https://stable.stable-demos.com/who-we-are/

jQuery(function($){
  $(window).scroll(function () {
    var y = $(window).scrollTop(),
      x = $('.div6').offset().top - 100;
      if (y > x) {
         $('.div6').delay(1300).animate({ opacity: 1, "margin-left": '+=50'});
      } else {
        // do not run the animation
      }
  });
 });

.div6 {
  opacity: 0;
  font-size: 48px;
  margin-left: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div6">
  <div class="wrapper">
   <h2>At The Stable, we are for you. We tackle your problems for you and celebrate your victories with you.</h2>
  </div>
 </div>

Answer 1

您需要跟踪动画是否已被触发，之后再触发。可以通过如下所示的变量来完成：

var done = false;
jQuery(function($) {
  $(window).scroll(function() {
    if (!done) {
      var y = $(window).scrollTop(),
        x = $('.div6').offset().top - 100;
      if (y > x) {
        done = true;
        $('.div6')
          .delay(1300)
          .animate({
            opacity: 1,
            marginLeft: '+=50'
          });
      }
    }

  });
});

.div6 {
  opacity: 0;
  font-size: 48px;
  margin-left: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div6">
  <div class="wrapper">
    <h2>At The Stable, we are for you. We tackle your problems for you and celebrate your victories with you.</h2>
  </div>
</div>

奇怪的 jQuery 动画行为 - 一遍又一遍地保持运行

Strange jQuery Animation Behavior - Keeps Running Over and Over

css

jquery-animate

奇怪的 jQuery 动画行为 - 一遍又一遍地保持 运行

Strange jQuery Animation Behavior - Keeps Running Over and Over

css

jquery-animate

奇怪的 jQuery 动画行为 - 一遍又一遍地保持运行