jQuery 通过滚动页面为元素添加动画

Question

我正在尝试通过滚动页面来创建动画，如下所示:

$(function() {
$(document).on('scroll', function() {
    var top = $(document).scrollTop();      
    if (top > 2200 && top < 2401) {
        if (top > 2200 && top < 2210) {
            $('#seta2').stop().animate({left: "826px"}, 300, "easeOutQuad" );
        }
        if (top > 2211 && top < 2220) {
            $('#seta2').stop().animate({left: "821px"}, 300, "easeOutQuad" );
        }
        if (top > 2221 && top < 2230) {
            $('#seta2').stop().animate({left: "816px"}, 300, "easeOutQuad" );
        }
        if (top > 2231 && top < 2240) {
            $('#seta2').stop().animate({left: "811px"}, 300, "easeOutQuad" );
        }
        if (top > 2241 && top < 2250) {
            $('#seta2').stop().animate({left: "806px"}, 300, "easeOutQuad" );
        }
        if (top > 2251 && top < 2260) {
            $('#seta2').stop().animate({left: "801px"}, 300, "easeOutQuad" );
        }
        if (top > 2261 && top < 2270) {
            $('#seta2').stop().animate({left: "796px"}, 300, "easeOutQuad" );
        }
        if (top > 2271 && top < 2280) {
            $('#seta2').stop().animate({left: "791px"}, 300, "easeOutQuad" );
        }
        if (top > 2281 && top < 2290) {
            $('#seta2').stop().animate({left: "786px"}, 300, "easeOutQuad" );
        }
        if (top > 2291 && top < 2300) {
            $('#seta2').stop().animate({left: "781px"}, 300, "easeOutQuad" );
        }
        if (top > 2301 && top < 2310) {
            $('#seta2').stop().animate({left: "776px"}, 300, "easeOutQuad" );
        }
        if (top > 2311 && top < 2320) {
            $('#seta2').stop().animate({left: "771px"}, 300, "easeOutQuad" );
        }
        if (top > 2321 && top < 2330) {
            $('#seta2').stop().animate({left: "766px"}, 300, "easeOutQuad" );
        }
        if (top > 2331 && top < 2340) {
            $('#seta2').stop().animate({left: "761px"}, 300, "easeOutQuad" );
        }
        if (top > 2341 && top < 2350) {
            $('#seta2').stop().animate({left: "756px"}, 300, "easeOutQuad" );
        }
        if (top > 2351 && top < 2360) {
            $('#seta2').stop().animate({left: "751px"}, 300, "easeOutQuad" );
        }
        if (top > 2361 && top < 2370) {
            $('#seta2').stop().animate({left: "746px"}, 300, "easeOutQuad" );
        }
        if (top > 2371 && top < 2380) {
            $('#seta2').stop().animate({left: "741px"}, 300, "easeOutQuad" );
        }
        if (top > 2381 && top < 2390) {
            $('#seta2').stop().animate({left: "736px"}, 300, "easeOutQuad" );
        }
        if (top > 2391 && top < 2400) {
            $('#seta2').stop().animate({left: "731px"}, 300, "easeOutQuad" );
        }
    }
    else {
        $('#seta2').stop().animate({left: "830px"}, 300, "easeOutQuad" );
    }
});});

但是，这段代码太长了，200px 滚动高度大约需要 70 行，有更好的选择吗？

再次，抱歉英语不好......非常感谢您的关注

Answer 1

你可以用一点数学来简化整个事情。仅当范围发生变化时才触发动画。否则，您将在每个像素变化时停止并开始动画。此外，您当前的范围有 1px 间隙，因为您正在执行 > 而不是 >=。

$(function() {
    var prevRange = -1;
    var range = -1;

    $(document).on('scroll', function() {
        var top = $(document).scrollTop();      
        if (top >= 2200 && top < 2401) {
            range = Math.floor(top/10)-220;
        } else {
            range = -1;
        }

        if(range != prevRange) {
            prevRange = range;
            var leftPx = (826 - range*5) + "px";
            $('#seta2').stop().animate({left: leftPx}, 300, "easeOutQuad" );
        }
    });
});

此代码找出您所在的 10 像素范围，然后使用它来确定动画的位置，假设您的范围都是 10 像素范围，并且动画范围是每 5 像素。