这是我的代码
if (xPrev < touch.pageY) {
$("#debug").text("down :: " + nav);
xPrev = touch.pageY;
switch(nav){
case 1:
$("#container").animate({top:0});
nav --;
break;
case 2:
$("#container").animate({top:-alto});
nav --;
break;
}
} else if (xPrev > touch.pageY) {
$("#debug").text("up :: " + nav);
xPrev = touch.pageY;
switch(nav){
case 0:
$("#container").animate({top:-alto});
nav ++;
break;
case 1:
$("#container").animate({top:-(alto*2)});
nav ++;
break;
}
};
我试图在向下滑动然后停止时为我的 div 制作几个像素的动画,然后在再次向下滑动时将动画设置到另一个位置,但当我第一次滑动时它会直接转到第二个位置。向上滑动时也会发生同样的情况。
如果计算起始位置,我会尝试在三个位置之间设置动画,ifs 是确定您是向上还是向下滑动以及向哪个方向对 #container 进行动画设置
我有这个变量:
var alto = $(window).height();
var nav = 0;
var xPrev = 0;
最佳答案
我认为问题在于您对 nav
不同值的映射与您要设置动画的位置不匹配。为了清楚起见,我会这样做,以便 nav
也像 y
轴一样从顶部的 0 开始,并随着对象向下移动而增加。这样你就可以清楚地映射“模型”(变量“nav”)和“ View ”(位置#container)。我不完全确定你是在谈论三个还是四个不同的立场。以下代码将使对象在三个不同位置之间产生动画效果。
var up = xPrev < touch.pageY;
if( nav<2 && !up ) nav++;
if( nav>0 && up ) nav--;
xPrev = touch.pageY;
$("#container").animate({top:(nav-1)*alto});
关于javascript - Break 不适用于我的 switch 语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27134244/