Как оптимизировать этот код JavaScript/jQuery?

Question

У меня есть много этих «блоков анимации» в js-файле, и это очень загружает страницу. Как я могу его оптимизировать? Дайте мне правильное направление.

Код:

$(document).ready(function(){ 
// second-section animation 
     $(window).scroll(function() { 
      var distanceTop = $("#animate_blocks").offset().top - $(window).height(); 
      if ($(window).scrollTop() > distanceTop) 
       $("#slidebox2").animate({"bottom":"0px", "opacity": "1"},{duration: 500, easing: "easeOutQuart"}); 
      else 
       $("#slidebox2").stop(true).animate({"bottom": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#slidebox3").animate({"left":"0px", "opacity": "1"},{duration: 500, easing: "easeOutQuart"}); 
      else 
       $("#slidebox3").stop(true).animate({"left": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#slidebox4").animate({"right":"0px", "opacity": "1"},{duration: 500, easing: "easeOutQuart"}); 
      else 
       $("#slidebox4").stop(true).animate({"right": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#slidebox6").animate({"right":"0px", "opacity": "1"},{duration: 600, easing: "easeOutQuart"}); 
      else 
       $("#slidebox6").stop(true).animate({"right": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#slidebox7").animate({"left":"0px", "opacity": "1", "z-index": "1"},{duration: 600, easing: "easeOutQuart"}); 
      else 
       $("#slidebox7").stop(true).animate({"left": "-300px", "opacity": "0", "z-index": "-1"},200); 
     }); 


    // advantage-box animation 

     $(window).scroll(function() { 
      var distanceTop = $("#name-list").offset().top - $(window).height(); 
      if ($(window).scrollTop() > distanceTop) 
       $("#advantages-heading").animate({"right":"0px", "opacity": "1"},{duration: 500, easing: "easeOutBack"}); 
      else 
       $("#advantages-heading").stop(true).animate({"right": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#advantages-text").animate({"left":"0px", "opacity": "1"},{duration: 500, easing: "easeOutBack"}); 
      else 
       $("#advantages-text").stop(true).animate({"left": "-300px", "opacity": "0"},200); 

     }); 

    // mobile-box animation 

     $(window).scroll(function() { 
      var distanceTop = $("#mobile-img").offset().top - $(window).height(); 
      if ($(window).scrollTop() > distanceTop) 
       $("#mobile-heading").animate({"left":"0px", "opacity": "1"},{duration: 300, easing: "easeOutBack"}); 
      else 
       $("#mobile-heading").stop(true).animate({"left": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#mobile-text").animate({"right":"0px", "opacity": "1"},{duration: 300, easing: "easeOutBack"}); 
      else 
       $("#mobile-text").stop(true).animate({"right": "-300px", "opacity": "0"},200); 
      if ($(window).scrollTop() > distanceTop) 
       $("#mobile-img").delay(200).animate({"bottom":"0px", "opacity": "1"},{duration: 300, easing: "easeOutBack"}); 
      else 
       $("#mobile-img").stop(true).animate({"bottom": "-150px", "opacity": "0"},200); 

     }); 
}); 

Answer 1

Ваше состояние всегда одинаково, так что вы можете сгруппировать их в одном, если и еще, а также использовать счетчик

 $(window).scroll(function() { 
      var distanceTop = $("#animate_blocks").offset().top - $(window).height(); 
      if ($(window).scrollTop() > distanceTop) 
      { 
       for (var counter = 2; counter <= 7; counter++) 
       { 
        $("#slidebox"+counter).animate({"bottom":"0px", "opacity": "1"},{duration: 500, easing: "easeOutQuart"}); 
       } 
      } 
      else 
       for (var counter = 2; counter <= 7; counter++) 
       { 
        $("#slidebox"+counter).stop(true).animate({"bottom": "-300px", "opacity": "0"},200); 
       } 
     }); 

Answer 2

Несколько Оптимизированный код для 2 другой проверки состояния это может быть полезно.

это для ниже двух условий

$(document).ready(function(){ 


    // advantage-box animation 

     $(window).scroll(function() { 
      var distanceTop = $("#name-list").offset().top - $(window).height(); 
      if ($(window).scrollTop() > distanceTop){ 
       $("#advantages-heading").animate({"right":"0px", "opacity": "1"},{duration: 500, easing: "easeOutBack"}); 
       $("#advantages-text").animate({"left":"0px", "opacity": "1"},{duration: 500, easing: "easeOutBack"}); 
      }else{ 
       $("#advantages-heading").stop(true).animate({"right": "-300px", "opacity": "0"},200); 
       $("#advantages-text").stop(true).animate({"left": "-300px", "opacity": "0"},200); 
      } 

     }); 

    // mobile-box animation 

     $(window).scroll(function() { 
      var distanceTop = $("#mobile-img").offset().top - $(window).height(); 
      if ($(window).scrollTop() > distanceTop){ 
       $("#mobile-heading").animate({"left":"0px", "opacity": "1"},{duration: 300, easing: "easeOutBack"}); 
     $("#mobile-text").animate({"right":"0px", "opacity": "1"},{duration: 300, easing: "easeOutBack"}); 
       $("#mobile-img").delay(200).animate({"bottom":"0px", "opacity": "1"},{duration: 300, easing: "easeOutBack"}); 
      } else{ 
       $("#mobile-heading").stop(true).animate({"left": "-300px", "opacity": "0"},200); 
       $("#mobile-text").stop(true).animate({"right": "-300px", "opacity": "0"},200); 
       $("#mobile-img").stop(true).animate({"bottom": "-150px", "opacity": "0"},200); 
     } 

     }); 
});