html5 js和css3问题滑动第一次没有效果第二次才出来

Question

js加css3实现动画问题。。
javascript函数css3动画html5
第一个：：：：
function slideList(){
var downY = 0;
var step = 1/4;
var nowIndex = 0;
var nextorprevIndex = 0;
$li.on('touchstart',function(ev){
var touch = ev.originalEvent.changedTouches[0];
downY = touch.pageY;
nowIndex = $(this).index();
$li.on('touchmove',function(ev){
var touch = ev.originalEvent.changedTouches[0];

        $(this).siblings().hide();

        if( touch.pageY < downY ){  //↑
            nextorprevIndex = nowIndex == $li.length-1 ? 0 : nowIndex + 1;
            $li.eq(nextorprevIndex).css('transform','translate(0,'+(viewHeight + touch.pageY - downY)+'px)');
        }
        else if( touch.pageY > downY ){  
            nextorprevIndex = nowIndex == 0 ? $li.length-1 : nowIndex - 1;
            $li.eq(nextorprevIndex).css('transform','translate(0,'+(-viewHeight + touch.pageY - downY)+'px)');
        }

        $li.eq(nextorprevIndex).show().addClass('zIndex');
        $(this).css('transform','translate(0,'+(touch.pageY - downY)*step+'px) scale('+(1-Math.abs(touch.pageY - downY)/viewHeight*step)+')');

    });

    $li.on('touchend',function(ev){
        var touch = ev.originalEvent.changedTouches[0];
        if( touch.pageY < downY ){  
            $(this).css('transform','translate(0,'+(-viewHeight * step)+'px) scale('+(1-step)+')');
        }
        else if( touch.pageY > downY ){  
            $(this).css('transform','translate(0,'+(viewHeight * step)+'px) scale('+(1-step)+')');
        }
        $(this).css('transition','.3s');
        $li.eq(nextorprevIndex).css('transform','translate(0,0)');
        $li.eq(nextorprevIndex).css('transition','.3s');
    });

});

$li.on('transitionEnd webkitTransitionEnd',function(ev){
    resetFn();

});

function resetFn(){
    $li.css('transition','');
    $li.eq(nextorprevIndex).removeClass('zIndex').siblings().hide();
}

}
第二个；；：：
function slideList(){
var downY=0;
var step=1/4;
var nowIndex=0;
var nextIndex=0;

$li.on('touchstart',function(ev){
    var touch = ev.originalEvent.changedTouches[0];
    nowIndex=$(this).index();
    downY=touch.pageY;
    $li.on('touchmove',function(ev){
        var touch = ev.originalEvent.changedTouches[0];
            $(this).siblings().hide();
            if(downY>touch.pageY){
                nextIndex= nowIndex == $li.length-1 ? 0 : nowIndex+1;
                $li.eq(nextIndex).css('transform','translate(0,'+(viewHeight + touch.pageY - downY)+'px');
            }else if(downY<touch.pageY){
                nextIndex=nowIndex==0 ? $li.length-1 : nowIndex-1;
                $li.eq(nextIndex).css('transform','translate(0,'+(-viewHeight+touch.pageY-downY)+'px');
            }
            $li.eq(nextIndex).show().addClass("zIndex");
            $(this).css('transform','translate(0,'+(touch.pageY-downY)*step+'px) scale('+(1-Math.abs(touch.pageY-downY)/viewHeight*step)+')');
    })

    $li.on('touchend',function(ev){
        var touch = ev.originalEvent.changedTouches[0];
            if(downY>touch.pageY){
                $(this).css('transform','translate(0,'+(-viewHeight*step)+'px) scale('+(1-step)+')');
            }else if(downY<touch.pageY){
                $(this).css('transform','translate(0,'+(viewHeight*step)+'px) scale('+(1-step)+')');
            }
            $(this).css('transition','0.3s');
            $li.eq(nextIndex).css('transform','translate(0,0)');
            $li.eq(nextIndex).css('transition','0.3s');
    })
})
$li.on('transitionEnd webkitTransitionEnd',function(ev){
        reswtFn();
    })
function reswtFn(){
    $li.css('transition','');
    $li.eq(nextIndex).removeClass('zIndex').siblings().hide();
}

}
效果为什么第二个不行？？？？？？？？第一个可以？？？？？？？、

Answer 1

http://www.3fwork.com/b403/000962MYM013791/