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

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

Answer 2

根据您的代码的一小部分，我认为您可以找到您的顶部和左侧值之间的关系：

var top = $(document).scrollTop();   
var left = 826 - Math.floor(top - 2200)/2;
$('#seta2').stop().animate({left: left+"px"}, 300, "easeOutQuad" );

通过滚动页面来实现jQuery动画元素

2 个答案: