Question

我有那个js代码：

$(window).load(function() {

    var h = $('#home').height();

    $(window).scroll(function() {

        var scroll = $(window).scrollTop(),
            ww = $(window).width(),
            s = $("#skills");

        scroll >= 0 && scroll < h + 299 ? s.addClass("first") : s.removeClass("first");
        scroll >= h + 299 && scroll < h + 599 ? s.addClass("second") : s.removeClass("second");
        scroll >= h + 600 && scroll < h + 899 ? s.addClass("third") : s.removeClass("third");
        scroll >= h + 900 && scroll < h + 1199 ? s.addClass("fourth") : s.removeClass("fourth");
        scroll >= h + 1200 && scroll < h + 1499 ? s.addClass("fifth") : s.removeClass("fifth");
        scroll >= h + 1500 && scroll < h + 1799 ? s.addClass("sixth") : s.removeClass("sixth");
        scroll >= h + 1800 && scroll < h + 2099 ? s.addClass("seventh") : s.removeClass("seventh");
        scroll >= h + 2100 && scroll < h + 2399 ? s.addClass("eighth") : s.removeClass("eighth");
        scroll >= h + 2400 ? s.addClass("ninth") : s.removeClass("ninth");

        scroll >= h && scroll <= h + 2699 ? $("a.about").addClass("active") : $("a.about").removeClass("active");

        scroll >= h + 2700 ? s.animate({ marginLeft: -ww }, 'slow') : s.animate({ marginLeft: 0 }, 'slow');


    });

    $("a.about").click(function() { $('html,body').animate({ scrollTop: h}, 'slow'); });

});

它正确地做了我想要的。但是，我无法成功动画marginLeft。如果从页面顶部开始滚动，当您达到动画scroll >= h + 2700的条件时，您需要等待很长时间才能启动动画。如果在scroll >= h + 2700之前重新加载页面并向下滚动一次，动画将立即执行。

我需要做什么，以便在用户到达scroll >= h + 2700时立即为我的屏蔽设置动画？

至于设置条件的权利，因为我将他设置为滚动检查计数？我的意思是这么多几乎相同的行。

UPD 我现在添加.stop()动画效果更好。但是如果你不停止滚动，动画动画会慢得多。

http://jsfiddle.net/ujmMk/5/ - 我在Stack Overflow中找到了它。如果你要滚动那个jsfiddle例子，你可以理解我在说什么。

如何使用滚动触发器动画`marginLeft`？

0 个答案: