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

你的情况总是一样的，所以你可以把它们分成一个if和else，并且还使用一个计数器

var str = "Hi, my name is Andrew!!!"
var search = "s And"
var tag = "strong";

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);
         }

        });
});

如何优化此JavaScript / jQuery代码？

2 个答案: