如何修正这个JQ做的支持触摸屏的滑块开关在webkit上表现的BUG

[kinghome]

<style>
.ui-toggle-button{ 
	position:relative; 
	-webkit-width:100%;
	-webkit-height:39px;
	width:100%; 
	height:39px; 
	overflow:hidden; 
	clear:both;
	
}
.ui-toggle-track{
	position:absolute; 
	z-index:999;
	-webkit-top:5px;
	-webkit-left:5px;
	-webkit-bottom:5px;
	top:5px; 
	left:5px; 
	bottom:5px;
	-moz-border-radius: 28px;
	-khtml-border-radius: 28px;
	-webkit-border-radius: 28px;
	border-radius:28px;
	-webkit-width:28px;
	-webkit-height:28px; 
	width:28px; 
	height:28px; 
	background-color:#FFF; 
	border:solid 1px #ccc; 
	cursor:pointer; 
}
.ui-toggle-track:hover
{
	border-color:#0080C0;
	-webkit-box-shadow:0 0 5px 0 #0080C0;
	box-shadow:0 0 5px 0 #0080C0;
}
.ui-toggle-track div{
	-moz-border-radius: 14px;
	-khtml-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius:14px; 
	-webkit-width:14px;
	-webkit-height:14px;
	width:14px; 
	height:14px; 
	background-color:#0080C0; 
	-webkit-margin:7px;
	margin:7px;  
}
.ui-toggle-dragBar{
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px; 
	-webkit-height:10px;
	height:10px; 
	border:solid 1px #0080C0; 
	background-color:#ccc; 
	position:absolute; 
	z-index:888;
	-webkit-top:14px;
	-webkit-left:14px;
	-webkit-right:14px;
	-webkit-bottom:14px;
	top:14px; 
	left:14px; 
	right:14px; 
	bottom:14px;
}
.ui-toggle-dragBar div{
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px; 
	-webkit-height:10px;
	-webkit-width:10px;
	height:10px; 
	width:10px; 
	background-color:#00A4F2;
}
.item{ width:200px;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
var beginX=endX=0; 
     $(function(){
           $(".item").each(function(){
                 $(this).on("mousedown mouseup mousemove touchstart touchend touchmove",function(e){
                        isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
						hasTouch = 'ontouchstart' in window && !isTouchPad;
						switch(e.type){
							case"mousedown":
							case"touchstart":
								beginX = hasTouch ? e.originalEvent.targetTouches[0].pageX:e.pageX;
							break;
							case"mouseup":
							case"touchend":
								endX = hasTouch ? e.originalEvent.changedTouches[0].pageX:e.pageX;
								go($(this));
							break;}

				});
          });
    });
function go(ui){
		var orientation = beginX > endX ? 'left':'right';
		var range = Math.abs(endX - beginX);
		$("#animateDb").html("orientation:"+orientation+"<br/>range:"+range);
		
		switch(orientation){
			case"left":
				$(".ui-toggle-dragBar",ui).children().animate({'width':0});
				$('.ui-toggle-track',ui).animate({'left':5},'fast');
			break;
			case"right":
				$(".ui-toggle-dragBar",ui).children().animate({'width':'100%'});
				$('.ui-toggle-track',ui).animate({'left':160},'fast');
			break;	
		}
}
</script>
        <div id="animateDb"></div>
        <div class="item">		
              	<div class="ui-toggle-button">
                    <div class="ui-toggle-track"><div></div></div>
                    <div class="ui-toggle-dragBar"><div></div></div>
				</div>
        </div>
        <div class="item">		
              	<div class="ui-toggle-button">
                    <div class="ui-toggle-track"><div></div></div>
                    <div class="ui-toggle-dragBar"><div></div></div>
				</div>
        </div>

在火狐上表现良好；
在webkit浏览器上表现不如人意【当鼠标或触摸在item区域外释放，动画无法执行】
在ipad的浏览器上更惨，只要发生一次在item区域外释放，这个滑块动画就永远不能执行了。
请问各位大神有什么更好的改良意见和解决方案啊？