Странное поведение jQuery-анимации - продолжает работать снова и снова - PullRequest
Новая
       17

Странное поведение jQuery-анимации - продолжает работать снова и снова

1 голос
/ 14 мая 2019

Проблема Я оживляю текст слева направо.Он должен запускаться только один раз и выполняться, когда он виден (не должен запускаться до тех пор, пока он не будет виден!), Но по какой-то причине, хотя он и правильно ожидает его просмотра, он повторяется снова и снова, медленно толкая элементсо страницы.

Если у вас есть какие-либо идеи для меня, как остановить эту странность, я был бы очень признателен!

Вот пример веб-сайта, где это можно увидеть, еслинайти его полезным.

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>

1 Ответ

1 голос
/ 14 мая 2019

Вы должны следить за тем, была ли запущена анимация, и не позволять ей срабатывать после этого.Это можно сделать с помощью переменной, как показано ниже: 

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>
...