jQuery Animating Elements by Scrolling the page

问题:

I'm trying to create a animation by scrolling the page, something like this:

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

But, this code is too long, about 70 lines for a 200px scroll height, is there a better option for doing this?

Again, sorry for the bad english... And thanks a lot for paying attention

回答1:

You can simplify the whole thing with a little math. Only fire your animations whenever your range changes. Otherwise you will stop and start your animation on every pixel change. Also, your current ranges have 1px gaps in them because you are doing > instead of >=.

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

This code finds out which 10px range you are in and then uses that to figure out where to animate to, with the assumption that your ranges are all 10px ranges and the animation ranges are every 5px.

回答2:

According to the small part of your code, I think you can found a relation between your top and left value :

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