休息时间不在我的switch语句中

时间:2014-11-25 18:40:14

标签: javascript switch-statement case swipe

这是我的代码

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;

1 个答案:

答案 0 :(得分:1)

我认为问题在于您对nav的不同值的映射与您动画的位置不匹配。为了清楚起见,我会这样做nav也 - 就像y轴一样,从顶部开始0,随着对象向下移动而增加。通过这种方式,您可以清楚地映射&#34;模型&#34; (变量&#39; nav&#39;)和&#34;视图&#34; (职位#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});