Что в скрипте не так?

184

21 апреля 2018, 18:28

Скрипт работает, но анимация лагает жестко, особенно на слабых ноутах. Знакомый подсказал, что each каждый раз использовать не нужно, не понимаю тогда как должен выглядеть в итоге код.

Делаю так: анимированный элемент сначала в css имеет свойство display:none, по достижении скроллинга до нужного места, в jquery делаю fadeIn элементу и добавляю class, в котором прописана сама анимация в css. Подскажите, что в скрипте не правильно и как делается это правильно, пожалуйста.

$(document).ready(function() { 
  var windowHeight = $(window).height(); 
  $(document).on('scroll', function() { 
    $('#firstScroll').each(function() { 
      var self = $(this), 
        height = self.offset().top + self.height() + 50; 
      if ($(document).scrollTop() + windowHeight >= height) { 
        $('#firstGrid').addClass('fadeInDown').fadeIn(700); 
      } 
    }); 
    //цены в слайдере 
    $('.strike-price').each(function() { 
      var self = $(this), 
        height = self.offset().top + self.height() + 100; 
      if ($(document).scrollTop() + windowHeight >= height) { 
        $('.for-price big').addClass('fadeInDownPrice').fadeIn(700); 
      } 
    }); 
    //слайдер отзывов 
    $('#box6').each(function() { 
      var self = $(this), 
        height = self.offset().top + self.height(); 
      if ($(document).scrollTop() + windowHeight >= height) { 
        $('.contacts').addClass('fadeInTop').fadeIn(700); 
      } 
    }); 
  }); 
});

.fadeInDown { 
  animation: fadeInDown 1s linear; 
  top: 0 
} 
 
@keyframes fadeInDown { 
  0% { 
    opacity: 0; 
    top: 50px 
  } 
  100%% { 
    opacity: 1; 
    top: 0px 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span id="firstScroll">firstScroll</span> 
<div id="firstGrid">firstGrid 
  <div>firstGrid child</div> 
  <div>firstGrid child</div> 
  <div>firstGrid child</div> 
  <div>firstGrid child</div> 
</div>