我正在尝试通过滚动页面来创建动画,如下所示：
$(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"},"eaSEOutQuad" );
}
if (top > 2221 && top < 2230) {
$('#seta2').stop().animate({left: "816px"},"eaSEOutQuad" );
}
if (top > 2231 && top < 2240) {
$('#seta2').stop().animate({left: "811px"},"eaSEOutQuad" );
}
if (top > 2241 && top < 2250) {
$('#seta2').stop().animate({left: "806px"},"eaSEOutQuad" );
}
if (top > 2251 && top < 2260) {
$('#seta2').stop().animate({left: "801px"},"eaSEOutQuad" );
}
if (top > 2261 && top < 2270) {
$('#seta2').stop().animate({left: "796px"},"eaSEOutQuad" );
}
if (top > 2271 && top < 2280) {
$('#seta2').stop().animate({left: "791px"},"eaSEOutQuad" );
}
if (top > 2281 && top < 2290) {
$('#seta2').stop().animate({left: "786px"},"eaSEOutQuad" );
}
if (top > 2291 && top < 2300) {
$('#seta2').stop().animate({left: "781px"},"eaSEOutQuad" );
}
if (top > 2301 && top < 2310) {
$('#seta2').stop().animate({left: "776px"},"eaSEOutQuad" );
}
if (top > 2311 && top < 2320) {
$('#seta2').stop().animate({left: "771px"},"eaSEOutQuad" );
}
if (top > 2321 && top < 2330) {
$('#seta2').stop().animate({left: "766px"},"eaSEOutQuad" );
}
if (top > 2331 && top < 2340) {
$('#seta2').stop().animate({left: "761px"},"eaSEOutQuad" );
}
if (top > 2341 && top < 2350) {
$('#seta2').stop().animate({left: "756px"},"eaSEOutQuad" );
}
if (top > 2351 && top < 2360) {
$('#seta2').stop().animate({left: "751px"},"eaSEOutQuad" );
}
if (top > 2361 && top < 2370) {
$('#seta2').stop().animate({left: "746px"},"eaSEOutQuad" );
}
if (top > 2371 && top < 2380) {
$('#seta2').stop().animate({left: "741px"},"eaSEOutQuad" );
}
if (top > 2381 && top < 2390) {
$('#seta2').stop().animate({left: "736px"},"eaSEOutQuad" );
}
if (top > 2391 && top < 2400) {
$('#seta2').stop().animate({left: "731px"},"eaSEOutQuad" );
}
}
else {
$('#seta2').stop().animate({left: "830px"},"eaSEOutQuad" );
}
});});
但是,这段代码太长了,对于200px滚动高度大约有70行,是否有更好的选择呢？
再次,抱歉英语不好……非常感谢你的关注
解决方法
你可以用一点点数学来简化整个过程.只有在您的范围发生变化时才会触发动画.否则,您将在每次像素更改时停止并开始动画.此外,您当前的范围中有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},"eaSEOutQuad" );
}
});
});
此代码找出您所在的10px范围,然后使用它来确定动画的位置,假设您的范围都是10px范围,动画范围是每5px.
